Optimize ResizeObserver effect: add dependency array for activeSlide and related refs

[sourcery-ai]

Summary

A ResizeObserver effect is being re-created on every render, and it uses the activeSlide variable without including it in the dependency array. This leads to unnecessary performance overhead and implicit reliance on re-registration rather than properly tracking dependencies.

This issue was originally raised by sourcery-ai[bot] as an automated suggestion and then escalated by @Its4Nik.

Problem Details

• There is a React effect (likely a useEffect) that:
  • Instantiates a new ResizeObserver.
  • Uses activeSlide inside the observer callback.
  • Does not specify a dependency array.
• Because the effect has no dependency array:
  • It runs on every render.
  • A new ResizeObserver instance is created on each render.
  • The effect implicitly depends on activeSlide (and possibly contentRefs), but these are not declared as dependencies.

This can cause:

• Unnecessary performance cost from repeatedly creating and disposing observers.
• Potentially confusing behavior if the observer callback closes over stale values.

Expected Behavior

• The ResizeObserver should only be (re)created when its relevant dependencies change (e.g., activeSlide and any relevant refs such as contentRefs).
• The effect should declare an explicit dependency array that includes all variables referenced inside the effect and observer callback.

Actual Behavior

• The effect runs on every render with no dependency array.
• ResizeObserver instances are continuously created (and presumably cleaned up) even when nothing relevant has changed.

Suggested Fix

1. Identify the useEffect (or similar hook) where the ResizeObserver is created and activeSlide is used in the callback.

2. Update it to include a dependency array, e.g.:

   useEffect(() => {
     if (!contentRefs.current) return;
   
     const observer = new ResizeObserver(entries => {
       // logic that uses activeSlide
     });
   
     // Example: observe the current active slide element
     const node = contentRefs.current[activeSlide];
     if (node) {
       observer.observe(node);
     }
   
     return () => {
       observer.disconnect();
     };
   }, [activeSlide, contentRefs]);

3. Ensure that any other values used inside the effect or ResizeObserver callback are also included in the dependency array (or are stable references via useRef, useMemo, or useCallback).

4. Verify that the cleanup function (disconnecting the observer) is executed properly when dependencies change or the component unmounts.

Action Items

• Locate the ResizeObserver effect that currently has no dependency array.
• Add a proper dependency array including activeSlide and any other referenced variables (e.g., contentRefs).
• Confirm that the observer is not recreated unnecessarily and that the logic behaves correctly as activeSlide changes.
• Add or update tests (if present) to ensure the effect is only triggered on relevant state/prop changes.
• Optionally run profiling (React DevTools Profiler or browser performance tools) to verify reduced render overhead related to this effect.

---

I created this issue for @Its4Nik from #76 (comment).

Tips and commands

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[Its4Nik]

fixed in 09aea6f..98bdaeb