Despite all the tools we have for debugging frontend code, nothing beats a quick console.log to check the current state of the app. For years, I have temporarily stuffed console.log statements in all nooks and crannies within components and I was surprised when I did the same in a fresh CRA app recently and found it printed twice in the console.
const App = () => {
console.log('render');
return (
<div className="App">
...
</div>
)
}
Historically, this meant that the component was being re-rendered. But in this case, I couldn't figure out why the component was re-rendering since the state was not changing. After some digging, I found out that this "double console.log" was due to React StrictMode.
Quick intro to React StrictMode
Over the last few years, React has been moving towards Interruptible rendering which allows the rendering to be paused or changed after it has begun and Concurrency to handle multiple state updates at the same time. In order to enable these features, React components must be idempotent meaning that they must return the same output all the time given then same input. Historically, React components were not encouraged to be idempotent with lifecycle functions like componentWillMount and componentWillReceiveProps encouraging us to write logic that should only run sometimes (Usually on the first render). So any components with this "unsafe" behavior must be refactored to be idempotent in order for them to be used in newer versions of React with concurrency enabled.
With React 18, the concurrent features were enabled with the new createRoot entrypoint and CRA changed its template to use the createRoot entrypoint and use React StrictMode.
...
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);StrictMode is designed to show issues with components that will make them unusable with concurrent React. When enabled, it prints warnings about the usage of deprecated React features and modifies the behavior of React in development mode so that any issues with components become more visible. One such behavior change is that several functions and methods (e.g. Class component constructor + render, function component bodies) are invoked twice This explains why the console.log statement was printing twice!
How to get console.log to print only once again?
The easy fix is to disable React StrictMode by removing the component wrapper. But this would leave us blind to potential issues in the components we create.
The proper fix is to install the React developer tools browser extension which marks the double invoked console.log in a lighter color.
