Skip to content

Files

Latest commit

438a566 Β· Aug 26, 2019

History

History
68 lines (55 loc) Β· 1.83 KB

useTimeoutFn.md

File metadata and controls

68 lines (55 loc) Β· 1.83 KB

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