perf: only cancel the frame on unmount

Author: isekovanic

package/src/hooks/useRafCoalescedValue.ts

@@ -8,30 +8,33 @@ import { useEffect, useRef, useState } from 'react';
 export const useRafCoalescedValue = <S>(value: S): S => {
   const [emitted, setEmitted] = useState<S>(value);
   const pendingRef = useRef<S>(value);
-  const rafIdRef = useRef<number | 0>(0 as const);
+  const rafIdRef = useRef<number | null>(null);
 
   // If `value` changes, schedule a single RAF to publish the latest one.
   useEffect(() => {
     if (value === pendingRef.current) return;
     pendingRef.current = value;
 
-    if (rafIdRef.current) return; // already scheduled this frame
+    // already scheduled the next frame, skip
+    if (rafIdRef.current) return;
 
     const run = () => {
-      rafIdRef.current = 0;
+      rafIdRef.current = null;
       setEmitted(pendingRef.current);
     };
 
     rafIdRef.current = requestAnimationFrame(run);
+  }, [value]);
 
+  useEffect(() => {
     return () => {
-      // cancel the frame if needed
+      // cancel the frame if it exists only on unmount
       if (rafIdRef.current) {
         cancelAnimationFrame(rafIdRef.current);
-        rafIdRef.current = 0;
+        rafIdRef.current = null;
       }
     };
-  }, [value]);
+  }, []);
 
   return emitted;
 };