React useInterval hook
Implements setInterval()
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 a
useEffect()
hook to remember the latestcallback
whenever it changes. - Use a
useEffect()
hook dependent ondelay
to set up the interval and clean up.
const useInterval = (callback, delay) => { const savedCallback = React.useRef(); React.useEffect(() => { savedCallback.current = callback; }, [callback]); React.useEffect(() => { const tick = () => { savedCallback.current(); } if (delay !== null) { let id = setInterval(tick, delay); return () => clearInterval(id); } }, [delay]); }; const Timer = props => { const [seconds, setSeconds] = React.useState(0); useInterval(() => { setSeconds(seconds + 1); }, 1000); return <p>{seconds}</p>; }; ReactDOM.createRoot(document.getElementById('root')).render( <Timer /> );