useTimeout.md

useTimeout

Re-renders the component after a specified number of milliseconds.
Provides handles to cancel and/or reset the timeout.

Usage

import { useTimeout } from 'react-use';

function TestComponent(props: { ms?: number } = {}) {
  const ms = props.ms || 5000;
  const [isReady, cancel] = useTimeout(ms);

  return (
    <div>
      { isReady() ? 'I\'m reloaded after timeout' : `I will be reloaded after ${ ms / 1000 }s` }
      { isReady() === false ? <button onClick={ cancel }>Cancel</button> : '' }
    </div>
  );
}

const Demo = () => {
  return (
    <div>
      <TestComponent />
      <TestComponent ms={ 10000 } />
    </div>
  );
};

Reference

const [
    isReady: () => boolean | null,
    cancel: () => void,
    reset: () => void,
] = useTimeout(ms: number = 0);

• isReady :()=>boolean|null - function returning current timeout state:
  • false - pending re-render
  • true - re-render performed
  • null - re-render cancelled
• cancel :()=>void - cancel the timeout (component will not be re-rendered)
• reset :()=>void - reset the timeout