Double-render in development could be opt-in

Today React double-renders with StrictMode and ConcurrentMode to help developers detect impure renderings.

It helps with class-heavy codebases, but with function/hooks codebases, the use-case looks unclear to me.

• it adds noise to logging.
• it bites developers that look for a hook stability issue in their codebases before they find the relevant documentation (happened to me, and from SO/Issue tracker I am not alone).

Can we consider making the behaviour opt-in or optional at the least, esp. in ConcurrentMode where there is no alternative?

[gaearon]

Frankly I really wish double render would go away in concurrent mode. It bit me again today: style components global css added twice in development.

The whole point of double-rendering is to find issues like this since they would occur in Concurrent Mode in production, too (due to ability to interrupt renders). You should report it to Styled Components. In this case, double-rendering worked as intended: you noticed a real potential issue.

tl;dr; silently introducing side effects to the dev environment is not cool.

Another way to look at this is that you need to stop considering React components as functions called at particular predictable times, a concrete predictable number of times. That’s not the right mental model. The right mental model is that they’re pure-ish functions that React may call at any time, and they should not contain side effects.

In future versions, double-rendering will not be optional, so this will be something that people will learn early on. I also think this is something our docs should specify. I don’t think printing this to the console is any more helpful than printing a whole tutorial of how React works to the console. We gotta stop somewhere.

That said, to aid debugging, the next major version will suppress console logs during the second renders.

[gaearon]

We’ve actually silenced the second render logs on master by overriding console.log. But this is obviously controversial. I do wonder if you’re right and we should just do this for class lifecycles. Although then it will be harder to fix issues that occur due to a render side effect.