refactor(@toss/react): change to using usePreservedCallback (toss#450)

* refac(@toss/react): change to using usePreservedCallback

* refac(@toss/react): apply usePreservedCallback to the savedCallback in the useInterval hook

* fix(@toss/react): remove callback default function

packages/react/react/src/hooks/useInterval.ts

@@ -1,4 +1,6 @@
-import { useEffect, useRef } from 'react';
+import { noop } from '@toss/utils';
+import { useEffect } from 'react';
+import { usePreservedCallback } from './usePreservedCallback';
 
 type IntervalOptions =
   | number
@@ -11,17 +13,13 @@ type IntervalOptions =
 export function useInterval(callback: () => void, options: IntervalOptions) {
   const delay = typeof options === 'number' ? options : options.delay;
   const trailing = typeof options === 'number' ? undefined : options.trailing;
-  const savedCallback = useRef<() => void>();
+  const savedCallback = usePreservedCallback(callback ?? noop);
 
   useEffect(() => {
-    savedCallback.current = callback;
-  });
-
-  useEffect(() => {
-    if (trailing === false && savedCallback.current) {
-      savedCallback.current();
+    if (trailing === false) {
+      savedCallback();
     }
-  }, [trailing]);
+  }, [trailing, savedCallback]);
 
   useEffect(() => {
     if (delay === null) {
@@ -31,12 +29,10 @@ export function useInterval(callback: () => void, options: IntervalOptions) {
     }
 
     function tick() {
-      if (savedCallback.current) {
-        savedCallback.current();
-      }
+      savedCallback();
     }
 
     const id = window.setInterval(tick, delay);
     return () => window.clearInterval(id);
-  }, [delay]);
+  }, [delay, savedCallback]);
 }

packages/react/react/src/hooks/usePreservedCallback.ts

@@ -8,10 +8,7 @@ export function usePreservedCallback<Callback extends (...args: any[]) => any>(c
     callbackRef.current = callback;
   }, [callback]);
 
-  return useCallback(
-    (...args: any[]) => {
-      return callbackRef.current(...args);
-    },
-    [callbackRef]
-  ) as Callback;
+  return useCallback((...args: any[]) => {
+    return callbackRef.current(...args);
+  }, []) as Callback;
 }

packages/react/react/src/hooks/useTimeout.ts

@@ -1,24 +1,14 @@
-import { useEffect, useRef } from 'react';
+import { noop } from '@toss/utils';
+import { useEffect } from 'react';
+import { usePreservedCallback } from './usePreservedCallback';
 
 /** @tossdocs-ignore */
 export function useTimeout(callback: () => void, delay = 0) {
-  const savedCallback = useRef<() => void>();
+  const savedCallback = usePreservedCallback(callback ?? noop);
 
   useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
+    const timeoutId = window.setTimeout(savedCallback, delay);
 
-  useEffect(() => {
-    function handleTimeout() {
-      if (savedCallback.current) {
-        savedCallback.current();
-      }
-    }
-
-    const timeoutId = window.setTimeout(handleTimeout, delay);
-
-    return () => {
-      window.clearTimeout(timeoutId);
-    };
-  }, [delay]);
+    return () => window.clearTimeout(timeoutId);
+  }, [delay, savedCallback]);
 }

packages/react/react/src/hooks/useVisibilityEvent.ts

@@ -1,12 +1,13 @@
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
+import { usePreservedCallback } from './usePreservedCallback';
 
 type VisibilityState = Document['visibilityState'];
 
 /** @tossdocs-ignore */
 export function useVisibilityEvent(callback: (visibilityState: VisibilityState) => void) {
-  const handleVisibilityChange = useCallback(() => {
+  const handleVisibilityChange = usePreservedCallback(() => {
     callback(document.visibilityState);
-  }, [callback]);
+  });
 
   useEffect(() => {
     document.addEventListener('visibilitychange', handleVisibilityChange);