useRetimer

Exports Size

Gzip Size

Brotli Size

Source Code

View on GitHub

Docs

Edit this page

Use setTimeout without worrying about memory leaks and race conditions.

Usage

Let’s say you are building a click-to-close button that should disappear 3 seconds after the latest click:


import { useCallback, useState } from 'react';
import { useRetimer } from 'foxact/use-retimer';
 
const Demo = () => {
  const [open, setOpen] = useState(true);
  const retimer = useRetimer();
 
  const handleClick = useCallback(() => {
    retimer(setTimeout(() => setOpen(false), 3000));
  }, [retimer]); // retimer is memoized so you can include it in the dependency array
 
  return (
    <div>
      {open && <button onClick={handleClick}>close at 3 seconds after the latest click</button>}
    </div>
  );
};