useManualTimeout

A hook that lets you manually set and clear timeouts.

Unlike useTimeout, there is no automatic initial execution — timeouts must be set explicitly. All pending timeouts are automatically cleared when the hook unmounts.

useTimeout is not well-suited for complex timeout scenarios such as nested timeouts due to hooks rules. useManualTimeout is useful when you need to run parallel or nested timeouts and clear them all at once.

Code

🔗 View source code

Interface

typescript

const useManualTimeout: () => {
  set: (callback: () => void, delay: number) => number;
  clearAll: () => void;
}

Returns

Name	Type	Description
set	(callback: () => void, delay: number) => number	Function to set a timeout. Returns the timeout ID
clearAll	() => void	Function to clear all pending timeouts

Usage

typescript

import { useManualTimeout } from '@modern-kit/react';

const DELAY_TIME = 1500;

const Example = () => {
  const [number, setNumber] = useState(0);

  const { set } = useManualTimeout();

  const handleSetTimeout = () => {
    set(() => {
      setNumber(number + 1);
    }, DELAY_TIME);
  }

  useEffect(() => {
    set(() => {
      setNumber((prev) => prev + 1);

      set(() => {
        setNumber((prev) => prev + 2);

        set(() => {
          setNumber((prev) => prev + 3);
        }, DELAY_TIME);
      }, DELAY_TIME);
    }, DELAY_TIME);
  }, [set]);

  return (
    <div>
      <p>{number}</p>
      <div>
        <button onClick={handleSetTimeout}>set</button>
      </div>
    </div>
  );
};

Example

Count: 0