feat: useTransition replace timeout with animationFrameTimeout

src/useSwitchTransition/useDefaultMode.ts

@@ -15,7 +15,6 @@ export function useDefaultMode<S>({
 
     // skip fist mount and any unchanged effect 🚫
     const [lastItem] = list.slice(-1);
-    console.log(lastItem.state, state, 'default');
     if (lastItem.state === state) return;
 
     // 0 update key

src/useTransition/index.ts

@@ -1,4 +1,9 @@
 import {useEffect, useRef, useState} from 'react';
+import {
+  Canceller,
+  clearAnimationFrameTimeout,
+  setAnimationFrameTimeout,
+} from '../helpers/setAnimationFrameTimeout';
 
 export type Stage = 'from' | 'enter' | 'leave';
 
@@ -7,27 +12,29 @@ export function useTransition(state: boolean, timeout: number) {
   const [stage, setStage] = useState<Stage>(state ? 'enter' : 'from');
 
   // the timer for should mount
-  const timer = useRef<number>();
+  const timer = useRef<Canceller>({});
   const [shouldMount, setShouldMount] = useState(state);
 
   useEffect(
     function handleStateChange() {
-      clearTimeout(timer.current);
+      clearAnimationFrameTimeout(timer.current);
 
       // when true - trans from to enter
       // when false - trans enter to leave, unmount after timeout
       if (state === true) {
         setStage('from');
         setShouldMount(true);
-        setTimeout(() => {
+        setAnimationFrameTimeout(() => {
           setStage('enter');
         });
       } else {
         setStage('leave');
-        timer.current = setTimeout(() => {
+        timer.current = setAnimationFrameTimeout(() => {
           setShouldMount(false);
         }, timeout);
       }
+
+      return () => clearAnimationFrameTimeout(timer.current);
     },
     [state, timeout]
   );