Function useSafeTimeout

packages/react/src/hooks/useSafeTimeout.ts:11–38

()

 * This hook ensures that all timeouts are cleared when the component unmounts.
 */
export default function useSafeTimeout(): {safeSetTimeout: SetTimeout; safeClearTimeout: ClearTimeout} {
  const timers = useRef<Set<number>>(new Set<number>())

  const safeSetTimeout = useCallback(
    (handler: TimerHandler, timeout?: number | undefined, ...args: unknown[]): number => {
      const id = window.setTimeout(handler, timeout, ...args)
      timers.current.add(id)
      return id
    },
    [],
  )

  const safeClearTimeout = useCallback((id: number) => {
    clearTimeout(id)
    timers.current.delete(id)
  }, [])

  useEffect(() => {
    return () => {
      // eslint-disable-next-line react-hooks/exhaustive-deps
      for (const id of timers.current) {
        clearTimeout(id)
      }
    }
  }, [])

  return {safeSetTimeout, safeClearTimeout}
}