useTimeout()

The useTimeout() hook is a declarative wrapper around setTimeout. It handles setting up and clearing the timer automatically, and allows you to pause or clear the timeout by passing null as the delay.

Import

typescript

import { useTimeout } from 'the-react-hooks';

Usage

Click Start to trigger an action after 3 seconds.
Click Cancel (or pass null) to abort the timeout.

😴

System Idle

Component.tsx

import { useTimeout } from 'the-react-hooks';
import { useState } from 'react';

export const Component = () => {
  const [visible, setVisible] = useState(true);

  useTimeout(() => {
    setVisible(false);
  }, 3000);

  return (
    <div>
      {visible ? 'I will disappear in 5 seconds...' : 'Gone!'}
    </div>
  );
}

API

Arguments

callback – () => void The function to be executed when the timer expires.
delay – number | null The time in milliseconds to wait. Pass null to stop/cancel the timer.

Returns

This hook returns void.

PrevioususeThrottle NextuseToggle