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?
The component 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 component
constructor,render, andshouldComponentUpdatemethods- Class component static
getDerivedStateFromPropsmethod- Function component bodies
- State updater functions (the first argument to
setState)- Functions passed to
useState,useMemo, oruseReducer
So far, this is covered by posts like:
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 components 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;
timers? Is that just an import for the globalsetTimeout, or something else?renderandtime is uptwice, could not reproduce.