fix: fix useVisualisation hook

Author: ayoub3bidi

src/hooks/useVisualization.js

@@ -5,13 +5,6 @@ import {
   DEFAULT_ARRAY_SIZE,
 } from '../constants';
 
-/**
- * Custom hook for managing visualization state and animation playback
- * @param {number[]} initialArray - The initial array to visualize
- * @param {number} speed - Animation base speed in milliseconds (from ANIMATION_SPEEDS)
- * @param {string} mode - Visualization mode ('autoplay' or 'manual')
- * @returns {Object} Visualization state and controls
- */
 export function useVisualization(
   initialArray,
   speed,
@@ -32,23 +25,28 @@ export function useVisualization(
   const stepsRef = useRef([]);
   const autoplayTimeoutRef = useRef(null);
 
-  // keep stepsRef in sync
+  // Centralized cleanup function
+  const clearAutoplayTimeout = useCallback(() => {
+    if (autoplayTimeoutRef.current) {
+      clearTimeout(autoplayTimeoutRef.current);
+      autoplayTimeoutRef.current = null;
+    }
+  }, []);
+
+  // Keep stepsRef in sync
   useEffect(() => {
     stepsRef.current = steps;
   }, [steps]);
 
-  // cleanup on unmount: clear any pending timeout
+  // Cleanup on unmount
   useEffect(() => {
     return () => {
-      if (autoplayTimeoutRef.current) {
-        clearTimeout(autoplayTimeoutRef.current);
-        autoplayTimeoutRef.current = null;
-      }
+      clearAutoplayTimeout();
       animationRef.current = null;
     };
-  }, []);
+  }, [clearAutoplayTimeout]);
 
-  // Reset when array changes (external array update)
+  // Reset when array changes
   useEffect(() => {
     setArray(initialArray);
     setStates(Array(initialArray.length).fill(ELEMENT_STATES.DEFAULT));
@@ -57,41 +55,35 @@ export function useVisualization(
     setIsComplete(false);
     setIsPlaying(false);
     setIsAutoplayActive(false);
-    if (autoplayTimeoutRef.current) {
-      clearTimeout(autoplayTimeoutRef.current);
-      autoplayTimeoutRef.current = null;
-    }
-  }, [initialArray]);
-
-  const loadSteps = useCallback(algorithmSteps => {
-    setSteps(algorithmSteps);
-    setCurrentStep(0);
-    setIsComplete(false);
+    clearAutoplayTimeout();
+  }, [initialArray, clearAutoplayTimeout]);
+
+  const loadSteps = useCallback(
+    algorithmSteps => {
+      clearAutoplayTimeout();
+      setSteps(algorithmSteps);
+      setCurrentStep(0);
+      setIsComplete(false);
 
-    if (algorithmSteps.length > 0) {
-      const firstStep = algorithmSteps[0];
-      setArray(firstStep.array);
-      setStates(firstStep.states);
-      setDescription(firstStep.description);
-    }
-  }, []);
+      if (algorithmSteps.length > 0) {
+        const firstStep = algorithmSteps[0];
+        setArray(firstStep.array);
+        setStates(firstStep.states);
+        setDescription(firstStep.description);
+      }
+    },
+    [clearAutoplayTimeout]
+  );
 
-  /**
-   * computeEffectiveDelay
-   * - scales baseDelay inversely with array length so big arrays don't take forever
-   * - caps total run time to MAX_TOTAL_MS when possible
-   */
   const computeEffectiveDelay = (baseDelay, arrayLength, totalSteps) => {
-    const MAX_TOTAL_MS = 30000; // max total autoplay time default (30s)
-    const MIN_DELAY_MS = 30; // lower bound per step
-    const MAX_DELAY_MS = 10000; // upper bound per step
+    const MAX_TOTAL_MS = 30000;
+    const MIN_DELAY_MS = 30;
+    const MAX_DELAY_MS = 10000;
 
-    // scale delay by default array size ratio
     const scaled = Math.round(
       baseDelay * (DEFAULT_ARRAY_SIZE / Math.max(1, arrayLength))
     );
 
-    // enforce a cap so total time isn't ridiculous
     let final = scaled;
     if (totalSteps && final * totalSteps > MAX_TOTAL_MS) {
       final = Math.max(MIN_DELAY_MS, Math.floor(MAX_TOTAL_MS / totalSteps));
@@ -100,14 +92,10 @@ export function useVisualization(
     return Math.max(MIN_DELAY_MS, Math.min(final, MAX_DELAY_MS));
   };
 
-  /**
-   * Starts autoplay animation or performs single step in manual mode
-   */
   const play = useCallback(() => {
     if (stepsRef.current.length === 0 || isComplete) return;
 
     if (mode === VISUALIZATION_MODES.MANUAL) {
-      // Manual: advance a single step
       if (currentStep < stepsRef.current.length - 1) {
         const nextStep = currentStep + 1;
         const step = stepsRef.current[nextStep];
@@ -124,6 +112,7 @@ export function useVisualization(
     }
 
     // Autoplay
+    clearAutoplayTimeout();
     setIsPlaying(true);
     setIsAutoplayActive(true);
     animationRef.current = true;
@@ -132,6 +121,7 @@ export function useVisualization(
       if (!animationRef.current || stepIndex >= stepsRef.current.length) {
         setIsPlaying(false);
         setIsAutoplayActive(false);
+        clearAutoplayTimeout();
         if (stepIndex >= stepsRef.current.length) {
           setIsComplete(true);
         }
@@ -148,6 +138,7 @@ export function useVisualization(
         setIsComplete(true);
         setIsPlaying(false);
         setIsAutoplayActive(false);
+        clearAutoplayTimeout();
         return;
       }
 
@@ -156,36 +147,29 @@ export function useVisualization(
       const totalSteps = stepsRef.current.length || 0;
       const effectiveDelay = computeEffectiveDelay(speed, arrayLen, totalSteps);
 
-      // clear any existing timeout before scheduling next
-      if (autoplayTimeoutRef.current) {
-        clearTimeout(autoplayTimeoutRef.current);
-        autoplayTimeoutRef.current = null;
-      }
-
+      clearAutoplayTimeout();
       autoplayTimeoutRef.current = setTimeout(() => {
         runAutoplay(stepIndex + 1);
       }, effectiveDelay);
     };
 
     runAutoplay(currentStep);
-  }, [currentStep, speed, isComplete, mode, array.length]);
+  }, [
+    currentStep,
+    speed,
+    isComplete,
+    mode,
+    array.length,
+    clearAutoplayTimeout,
+  ]);
 
-  /**
-   * Pauses autoplay (can be resumed)
-   */
   const pause = useCallback(() => {
     animationRef.current = null;
     setIsPlaying(false);
     setIsAutoplayActive(false);
-    if (autoplayTimeoutRef.current) {
-      clearTimeout(autoplayTimeoutRef.current);
-      autoplayTimeoutRef.current = null;
-    }
-  }, []);
+    clearAutoplayTimeout();
+  }, [clearAutoplayTimeout]);
 
-  /**
-   * Resets to initial step
-   */
   const reset = useCallback(() => {
     pause();
     setCurrentStep(0);