useRetimer

Exports Size
loading...
Gzip Size
loading...
Brotli Size
Source Code
View on GitHub
Docs
Edit this page

Use setTimeout (opens in a new tab) 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>
  );
};
usePageVisibilityuseSessionStorage