Why setInterval() is executed twice?-CodePudding

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>
  );
}

CodePudding user response：

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

CodePudding user response：

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.