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?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum