Update to React Strict Mode Double Rendering

[lunaruan]

Overview

We are no longer silencing console methods during the double render in Strict Mode.

Background

In Strict Mode, React double invokes render methods in order to flush out potential side effects. During the second render, React used to automatically silence console methods (ex. console.log() and console.warn()) to reduce the noise of multiple repeat logs. However, this ended up causing a lot of confusion for developers during debugging, so we are changing this behavior.

Double Render Behavior Changes

Going forward, React will no longer suppress logs during the second render by default. If you have React DevTools > 4.18.0 installed, logs during the second render will now show up in the console with muted colors.

You can override this behavior in React DevTools > 4.18.0 by editing the “Hide logs during second render in Strict Mode” setting to hide the double logs (like before).

Known Problems

Because DevTools overrides the native console to dim or suppress StrictMode double logging, it changes the location shown by the browser’s console. Previously, with component stacks, we were already overriding the console for console.warn and console.error. However, with this change, we are now also overriding console.log. We have a request for better browser console overrides, but in the meantime, we are looking into a solution to only patch console.log during a double render to avoid this issue.

[Andarist]

Awesome and very welcome change, thank you ❤️

[michaelhall923]

I am trying to use this feature but it's not working. Still getting the double logs.

• Google Chrome Version 109.0.5414.87 (Official Build) (arm64)
• React Developer Tools Version 4.27.1 (12/6/2022)
• Mac Mini M1, 2020, Ventura 13.1