Why setInterval() is executed twice?

Question

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

Because that's what [setInterval does](https://developer.mozilla.org/en-US/docs/Web/API/setInterval)? — Liam, May 04 '22 at 10:26
checked it, on my side, "hi" is being logged once every second. https://jsfiddle.net/4uchfrvm/3/ — Wang Liang, May 04 '22 at 10:30
I'm guessing that `useEffect` is being called twice which causes setInterval to be called twice. — phuzi, May 04 '22 at 10:34
Could be [a side effect of React's Strict Mode](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects)? — Andy, May 04 '22 at 10:39
setInterval calls console.log("hi") two times, then in a second two more times and so on. Each second we have +2 console.logs. — Sunset Boulevard, May 04 '22 at 11:19

score 0 · Answer 1 · answered May 04 '22 at 10:38

0

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 May 04 '22 at 10:38

AngryJohn

576
4
10

setInterval calls console.log("hi") two times, then in a second two more times and so on. Each second we have +2 console.logs. – Sunset Boulevard May 04 '22 at 11:18

score 0 · Answer 2 · answered May 04 '22 at 10:46

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.

Why setInterval() is executed twice?

2 Answers2