React useTimeout hook
Implements setTimeout()
in a declarative manner.
- Create a custom hook that takes a
callback
and adelay
. - Use the
useRef()
hook to create aref
for the callback function. - Use the
useEffect()
hook to remember the latest callback. - Use the
useEffect()
hook to set up the timeout and clean up.
const useTimeout = (callback, delay) => { const savedCallback = React.useRef(); React.useEffect(() => { savedCallback.current = callback; }, [callback]); React.useEffect(() => { const tick = () => { savedCallback.current(); } if (delay !== null) { let id = setTimeout(tick, delay); return () => clearTimeout(id); } }, [delay]); }; const OneSecondTimer = props => { const [seconds, setSeconds] = React.useState(0); useTimeout(() => { setSeconds(seconds + 1); }, 1000); return <p>{seconds}</p>; }; ReactDOM.createRoot(document.getElementById('root')).render( <OneSecondTimer /> );