Skip to content

[DevTools] Console logging and StrictMode double rendering #21889

Closed
@bvaughn

Description

@bvaughn

React currently suppress all console logs while double rendering (or double invoking render phase lifecycles) to reduce console noise, e.g.:

if (
debugRenderPhaseSideEffectsForStrictMode &&
workInProgress.mode & StrictLegacyMode
) {
disableLogs();
try {
nextChildren = renderWithHooks(
current,
workInProgress,
render,
nextProps,
ref,
renderLanes,
);
} finally {
reenableLogs();
}
}
setIsRendering(false);

Unfortunately this often causes confusion and leads to complaints (see the discussion on #21783). We could leverage DevTools to improve the default experience and give developers control over this behavior.

  • 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).

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions