This is my react code. It makes the component re-render infinitely:
const [seconds, setSeconds] = useState(60)
useEffect(() => {
const interval = setInterval(() => {
setSeconds(seconds => seconds - 1);
}, 1000);
return () => clearInterval(interval);
}, []);
console.log("object"); 
1
0
0
This happens because you only clear the interval when the component unloads, which only happens when the user navigates away from the page.
Maybe this is what you need? When the interval reaches 0, I clear it. But for this I have to use reference, I can't use state from setInterval because it only has initial value:
export default function App() {
const [seconds, setSeconds] = useState(5);
const secondsRef = useRef(seconds);
useEffect(() => {
const interval = setInterval(() => {
if (secondsRef.current seconds - 1);
}, 1000);
return () => clearInterval(interval);
}, []);
console.log("running", new Date());
return {seconds ;
}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
