Sometimes, we want to update React component every second with JavaScript.
In this article, we’ll look at how to update React component every second with JavaScript.
How to update React component every second with JavaScript?
To update React component every second with JavaScript, we can use the setInterval function to update a state in the useEffect hook.
For instance, we write
const [time, setTime] = useState(Date.now());
useEffect(() => {
const interval = setInterval(() => setTime(Date.now()), 1000);
return () => {
clearInterval(interval);
};
}, []);
in a function component.
We get set the initial value of time to the timestamp returned by Date.now.
Then in the useEffect callback, we call setInterval with a callback that calls setTime with Date.now() to update the time to the current timestamp.
And we call it with 1000 to do that every second.
We return a callback that calls clearInterval with interval to clear the timer when we unmount our component.
The useEffect callback runs once when we mount our component since we called it with an empty array.
Conclusion
To update React component every second with JavaScript, we can use the setInterval function to update a state in the useEffect hook.
