Move timeouts inside a useRef

timolins · Jan 6, 2025 · cb1fe8e · cb1fe8e
1 parent 1d5d3d3
commit cb1fe8e
Showing 1 changed file with 38 additions and 31 deletions.
diff --git a/src/core/use-toaster.ts b/src/core/use-toaster.ts
@@ -1,33 +1,37 @@
-import { useEffect, useCallback } from 'react';
+import { useEffect, useCallback, useRef } from 'react';
 import { createDispatch, ActionType, useStore, dispatch } from './store';
 import { toast } from './toast';
 import { DefaultToastOptions, Toast, ToastPosition } from './types';
 
-const toastTimeouts = new Map<Toast['id'], ReturnType<typeof setTimeout>>();
-
 export const REMOVE_DELAY = 1000;
 
-const addToRemoveQueue = (toastId: string, removeDelay = REMOVE_DELAY) => {
-  if (toastTimeouts.has(toastId)) {
-    return;
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({
-      type: ActionType.REMOVE_TOAST,
-      toastId: toastId,
-    });
-  }, removeDelay);
-
-  toastTimeouts.set(toastId, timeout);
-};
-
 export const useToaster = (
   toastOptions?: DefaultToastOptions,
   toasterId: string = 'default'
 ) => {
   const { toasts, pausedAt } = useStore(toastOptions, toasterId);
+  const toastTimeouts = useRef(
+    new Map<Toast['id'], ReturnType<typeof setTimeout>>()
+  ).current;
+
+  const addToRemoveQueue = useCallback(
+    (toastId: string, removeDelay = REMOVE_DELAY) => {
+      if (toastTimeouts.has(toastId)) {
+        return;
+      }
+
+      const timeout = setTimeout(() => {
+        toastTimeouts.delete(toastId);
+        dispatch({
+          type: ActionType.REMOVE_TOAST,
+          toastId: toastId,
+        });
+      }, removeDelay);
+
+      toastTimeouts.set(toastId, timeout);
+    },
+    []
+  );
 
   useEffect(() => {
     if (pausedAt) {
@@ -57,27 +61,30 @@ export const useToaster = (
     };
   }, [toasts, pausedAt, toasterId]);
 
-  const dispatch = createDispatch(toasterId);
+  const dispatch = useCallback(createDispatch(toasterId), [toasterId]);
 
   const startPause = useCallback(() => {
     dispatch({
       type: ActionType.START_PAUSE,
       time: Date.now(),
     });
-  }, []);
-
-  const updateHeight = useCallback((toastId: string, height: number) => {
-    dispatch({
-      type: ActionType.UPDATE_TOAST,
-      toast: { id: toastId, height },
-    });
-  }, []);
+  }, [dispatch]);
+
+  const updateHeight = useCallback(
+    (toastId: string, height: number) => {
+      dispatch({
+        type: ActionType.UPDATE_TOAST,
+        toast: { id: toastId, height },
+      });
+    },
+    [dispatch]
+  );
 
   const endPause = useCallback(() => {
     if (pausedAt) {
       dispatch({ type: ActionType.END_PAUSE, time: Date.now() });
     }
-  }, [pausedAt]);
+  }, [pausedAt, dispatch]);
 
   const calculateOffset = useCallback(
     (
@@ -110,8 +117,8 @@ export const useToaster = (
     [toasts]
   );
 
+  // Keep track of dismissed toasts and remove them after the delay
   useEffect(() => {
-    // Add dismissed toasts to remove queue
     toasts.forEach((toast) => {
       if (toast.dismissed) {
         addToRemoveQueue(toast.id, toast.removeDelay);
@@ -124,7 +131,7 @@ export const useToaster = (
         }
       }
     });
-  }, [toasts]);
+  }, [toasts, addToRemoveQueue]);
 
   return {
     toasts,