title | type | language | tags | cover | dateModified | ||
---|---|---|---|---|---|---|---|
React useTimeout hook |
snippet |
react |
|
interior-10 |
2020-11-16 |
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 />
);