Skip to content

Console Logging for StrictMode Double Rendering#22030

Merged
lunaruan merged 6 commits intofacebook:mainfrom
lunaruan:react_flight_devtools
Aug 25, 2021
Merged

Console Logging for StrictMode Double Rendering#22030
lunaruan merged 6 commits intofacebook:mainfrom
lunaruan:react_flight_devtools

Conversation

@lunaruan
Copy link
Copy Markdown
Contributor

@lunaruan lunaruan commented Aug 4, 2021

Closes #21889.

React currently suppress console logs in StrictMode during double rendering. However, this causes a lot of confusion. This PR moves the console suppression logic from React into React Devtools. Now by default, we no longer suppress console logs. Instead, we gray out the logs in console during double render. We also add a setting in React Devtools to allow developers to hide console logs during double render if they choose.

  • Disable console suppression by default in React.
  • Add an API for DevTools and React to communicate about when double rendering (or lifecycles) start and stop.
  • DevTools should gray out (but not hide) logs during second render pass by default.
  • DevTools should expose a new Debugging preference that allows users to suppress second logs entirely (mimicking the current default behavior).

New default console behavior

Chrome (Dark/Light):
image
image

Firefox (Dark/Light):
image image

Safari (Dark/Light):
image
image

Edge (Dark/Light):
image
image

Node:
image

New Devtools setting:
image

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Component: Developer Tools React Core Team Opened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[DevTools] Console logging and StrictMode double rendering

8 participants