useTimeoutFn.md

useTimeoutFn

Calls given function after specified amount of milliseconds.

Several thing about it's work:

• does not re-render component;
• automatically cancel timeout on cancel;
• automatically reset timeout on delay change;
• reset function call will cancel previous timeout;
• timeout will NOT be reset on function change. It will be called within the timeout, you have to reset it on your own when needed.

Usage

import * as React from 'react';
import { useTimeoutFn } from 'react-use';

const Demo = () => {
  const [state, setState] = React.useState('Not called yet');

  function fn() {
    setState(`called at ${Date.now()}`);
  }

  const [isReady, cancel, reset] = useTimeoutFn(fn, 5000);
  const cancelButtonClick = useCallback(() => {
    if (isReady() === false) {
      cancel();
      setState(`cancelled`);
    } else {
      reset();
      setState('Not called yet');
    }
  }, []);

  const readyState = isReady();

  return (
    <div>
      <div>{readyState !== null ? 'Function will be called in 5 seconds' : 'Timer cancelled'}</div>
      <button onClick={cancelButtonClick}> {readyState === false ? 'cancel' : 'restart'} timeout</button>
      <br />
      <div>Function state: {readyState === false ? 'Pending' : readyState ? 'Called' : 'Cancelled'}</div>
      <div>{state}</div>
    </div>
  );
};

Reference

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

• fn: Function - function that will be called;
• ms: number - delay in milliseconds;
• isReady: ()=>boolean|null - function returning current timeout state:
  • false - pending
  • true - called
  • null - cancelled
• cancel: ()=>void - cancel the timeout
• reset: ()=>void - reset the timeout