SetTimeout in component executing twice in react

Question

When I render the App component the code inside setTimeout runs twice.

I saw that setTimeout runs after the call stack has finished executing. I don't know whether its relevant to this.

Is it something to do with how react renders components.

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

App.js

import "./styles.css";

export default function App() {
  
  setTimeout(() => {
    console.log(`Logged!`);
  },
  1000
  )
  
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}

Should setTimeout only run of componentDidMount?

Hassan Imam
– Hassan Imam

2021-02-15 07:01:31 +00:00
Commented Feb 15, 2021 at 7:01 — Hassan Imam
– Hassan Imam, Commented Feb 15, 2021 at 7:01
stackoverflow.com/a/65766356/1927991

codemonkey
– codemonkey

2021-02-15 07:15:40 +00:00
Commented Feb 15, 2021 at 7:15 — codemonkey
– codemonkey, Commented Feb 15, 2021 at 7:15

SLePort · Accepted Answer · 2021-02-15 07:19:18Z

2

Your setTimeOut is called on every render of the App component.

In your case, React.StrictMode causes the re-renders.

To prevent this, you can add it in a useEffect hook with an empty dependency array:

useEffect(() => {
  const timer = setTimeout(() => {
    console.log(`Logged!`);
  }, 1000);
  return () => clearTimeout(timer);
}, []);

edited Feb 15, 2021 at 7:19

answered Feb 15, 2021 at 7:03

SLePort

15.5k3 gold badges40 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

codemonkey Over a year ago

His component only renders once. codesandbox.io/s/thirsty-dhawan-iyv1t?file=/src/App.js Can you explain why the setTimout callback is triggered twice?

SLePort Over a year ago

@codemonkey Because of the StrictMode I guess. Two console.log('Logged!") with it, one without it.

codemonkey Over a year ago

Yep! You should put that in your answer, because that's what the OP wants to know.

Collectives™ on Stack Overflow

SetTimeout in component executing twice in react

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related