javascript - setTimeout callback called twice in React functional component? - Stack Overflow

admin管理员组

文章数量:1332345

Consider the following code:

import React from "react";

function App() {
  console.log("render");

  setTimeout(() => {
    console.log("time is up");
  }, 2000);

  return <div>nothing to see here</div>;
}

export default App;

I expected the following output:

render
time is up

But the real output in the Chrome console is:

Note the 2 before time is up, showing us that time is up was output twice.

I don't understand why time is up is output twice. Can anyone explain this?

Consider the following code:

import React from "react";

function App() {
  console.log("render");

  setTimeout(() => {
    console.log("time is up");
  }, 2000);

  return <div>nothing to see here</div>;
}

export default App;

I expected the following output:

render
time is up

But the real output in the Chrome console is:

Note the 2 before time is up, showing us that time is up was output twice.

I don't understand why time is up is output twice. Can anyone explain this?

• javascript
• reactjs
• create-react-app

Share Improve this question Follow edited Jan 17, 2021 at 21:39 jonrsharpe 122k3030 gold badges267267 silver badges474474 bronze badges asked Jan 17, 2021 at 21:01 me.at.codingme.at.coding 17.9k4848 gold badges180180 silver badges342342 bronze badges 9

• What is timers? Is that just an import for the global setTimeout, or something else? – jonrsharpe Commented Jan 17, 2021 at 21:03
• @jonrsharpe Visual Studio Code did that for me. I removed it, but observe the same behaviour. – me.at.coding Commented Jan 17, 2021 at 21:05
• When I run that locally I see both render and time is up twice, could not reproduce. – jonrsharpe Commented Jan 17, 2021 at 21:05
• 2 @stefan.at.wpf Could you please verify from your index.js that you're not running in React.StrictMode? – Prashant Vishwakarma Commented Jan 17, 2021 at 21:19
• @PrashantVishwakarma I was running in strict mode and after having removed the strict mode, time is up is only shown once as expected. I don't understand why strict mode changes that though. Can you explain/post as answer? – me.at.coding Commented Jan 17, 2021 at 21:22

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 7

The ponent is rendered twice because CRA sets React's strict mode by default, which among other things tries to help you detect side effects (emphasis mine):

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

• Class ponent constructor, render, and shouldComponentUpdate methods
• Class ponent static getDerivedStateFromProps method
• Function ponent bodies
• State updater functions (the first argument to setState)
• Functions passed to useState, useMemo, or useReducer

So far, this is covered by posts like:

• Why my simple react ponent print console twice?
• Why is console.log logging twice in react js?
• Why does useState cause the ponent to render twice on each update?

---

However, you might then expect both "render" and "time is up" to be logged twice. The reason that doesn't happen, which as far as I can find hasn't been covered yet on SO, is that React was updated to deliberately suppress the duplicate logs:

This disables console.log by temporarily patching the global console object during the second render pass when we double render in strict mode in DEV.

This applies only to console.logs directly in the functions mentioned above, which doesn't include setTimeout callbacks, so the second console.log("render") is swallowed but the second console.log("time is up") is not.

React.StrictMode is a feature intended to ease devs spot problems related to React Lifecycle

It only happens when you run in development mode and renders with extra rules like rendering ponents more than once.

I think the documentation does a great job explaining this. StrictMode: React

Understandably, it gets irritating for people notice for the first time!

I believe the problem here is that you didn't put the setTimeout inside a useEffect. This means that when the app rerenders another timeout will get started and cause the issue you are finding. Try something like this.

import React, {useEffect} from "react";

function App() {
  console.log("render");

    useEffect(() => {
      const timer = setTimeout(() => {
        console.log('time is up');
      }, 2000);

      return () => {
        clearTimeout(timer);
      }
    }, []);

  return <div>nothing to see here</div>;
}

export default App;

本文标签： javascriptsetTimeout callback called twice in React functional componentStack Overflow