Fix: Resolve particle flickering issue during window resize

[notREKASH]

Fix: Resolve particle flickering issue during window resize

Problem

Particles flicker rapidly when resizing the window or during slow scroll interactions. This issue occurs when the component is brought into view, and the window is resized, causing unexpected behavior in the particle animation.

Additionally

When the window is resized, the refresh parameter has an impact on particle positioning. If the window becomes smaller, particles accumulate outside the visible area. If the window becomes larger, gaps or missing particles are visible, which disrupts the intended effect.

Solution:

1. Condition in useEffect:

   • Added a condition to ensure that the refresh value is truthy before triggering the particle refresh. If refresh is truthy, resizing the window causes the particles to refresh. By passing false to the refresh parameter, we avoid this behavior.

2. Performance Improvements:

   • Implemented useCallback and useMemo to optimize performance slightly (approximately a 0.00065ms improvement). These hooks prevent unnecessary re-renders during window resizing and scrolling.

3. Code Refactoring:

   • Removed redundant code (such as initCanva) and moved it inside the useEffect hook to comply with the DRY.

Testing:

• Tested with various window resize scenarios. The particle flickering issue no longer occurs after applying these changes.

Fixes #339.

[vercel]

@notREKASH is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.