Why setInterval() is executed twice?
Why "hi" is being logged in the console each second twice?
import { useEffect } from "react";
export default function App() {
useEffect(() => {
setInterval(() => console.log("hi"), 1000);
}, []);
return (
<div className="App">
Hello
</div>
);
}
2 answers
-
answered 2022-05-04 10:38
AngryJohn
because that's what
setInterval
is all about.From MDN:
The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
So you don't want to use
setInterval
because it will repeatedly execute your function, instead use setTimeout -
answered 2022-05-04 10:46
Anindya Dey
In addition to what @AngryJohn wrote, you should also clear the interval when the component unmounts, by using clearInterval like so:
import { useEffect } from "react"; export default function App() { useEffect(() => { let interval = setInterval(() => console.log("hi"), 1000); return () => clearInterval(timer) // This "return" function executes when a component unmounts }, []); return ( <div className="App"> Hello </div> ); }
Refer this SO question for more information.
How many English words
do you know?
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
how many words do you know
Powered by Examplum