Update state in setInterval not working as expected - reactjs

Question

I'm new to react, today I encounter a very strange case, what I want todo is to get the data from server side every 5 seconds, but it doesn't work as expected, the problem can be simplied to this:
npx create-react-app my-app
cd my-app
edit the App.js
import { useState } from "react";
function App() {
const [count, setCount] = useState(0)
const increment = () => {
// simulate the querying, for example, checking the status of server
console.log('Current count value:', count)
setCount(count + 1)
}
setInterval(increment, 1000)
return (
<span>Count: {count}</span>
);
}
export default App;
I want to update the state count every 1s, and I think the output in console would be
Current count value: 0
Current count value: 1
Current count value: 2
...
However, the output is very strange, click the link to see the output
(I cant' insert image in the content)
chrome console output
Thanks

Answer 1

You need to start interval in useEffect and clear when component unmount
import React, { useState, useEffect } from "react";
function App() {
const [count, setCount] = useState(0)
useEffect(() => {
const increment = () => {
// simulate the querying, for example, checking the status of server
console.log('Current count value:', count)
setCount(prev => prev + 1) // You can't use count state because it's will trigger useEffect and cause infinite loop. You need to use callback to update from previous value
}
const intervalId = setInterval(increment, 1000) // setInterval return interval id
return () => {
// Clear interval using intervalId
// This function run when component unmount
clearInterval(intervalId)
}
}, [])
return (
<span>Count: {count}</span>
);
}
export default App;

Answer 2

You can use setTimeout instead setinterval-is-moderately-evil
const DURATION = 1000;
const [count, setCount] = React.useState(0);
React.useEffect(() => {
setTimeout(() => {
setCount(count + 1);
}, DURATION);
});
You can read more of how to use setInterval in react here making-setinterval-declarative-with-react-hooks

Answer 3

You need to use useEffect hook to keep track of changes in the component's states.
trying to invoke a function inside the body of your component will make that function to re-invoke everytime any DOM is updated. The best practice to initiate your component is to put it inside a useEffect hook without dependencies.
useEffect(() => {
setInterval(increment, 1000)
}, []);
Now if you want to keep track of a state when it's updated you can use anotther useEffect and add the state in dependency array. Like:
useEffect(() => {
console.log('incremented', count)
}, [count]);
Here is an edited version of your code:
import { useState, useEffect } from "react";
function App() {
const [count, setCount] = useState(0)
// a function that changes count state
const increment = () => {
setCount(prevState => prevState + 1)
}
// when component is mounted
useEffect(() => {
setInterval(increment, 1000)
}, []);
// when count state changes
useEffect(() => {
console.log('incremented', count)
}, [count]);
return (
<span>Count: {count}</span>
);
}
export default App;