rsuite/esm/internals/hooks/useTimeout.js

A suite of react components

'use client';
import { useEffect, useRef, useCallback } from 'react';
/**
 * A timer hook
 * @param fn Timer callback function
 * @param ms Milliseconds of the timer
 * @param enabled Whether to open the timer
 */
export function useTimeout(fn, ms = 0, enabled = true) {
  const timeout = useRef(null);
  const callback = useRef(fn);
  const clear = useCallback(() => {
    timeout.current && clearTimeout(timeout.current);
  }, []);
  const set = useCallback(() => {
    timeout.current && clearTimeout(timeout.current);
    if (enabled) {
      timeout.current = setTimeout(() => {
        callback.current?.();
      }, ms);
    }
  }, [ms, enabled]);

  // update ref when function changes
  useEffect(() => {
    callback.current = fn;
  }, [fn]);
  useEffect(() => {
    set();
    return clear;
  }, [ms, enabled, set, clear]);
  return {
    clear,
    reset: set
  };
}
export default useTimeout;