5 ms·

Afaik this has been the behavior of StrictMode since it was introduced in React 16. One thing that’s called out in the linked docs is that duplicate console.lo

by Gravey 4y ago

Afaik this has been the behavior of StrictMode since it was introduced in React 16. One thing that’s called out in the linked docs is that duplicate console.logs were _deliberately_ silenced in React 17. I have no idea what they were thinking when they made this decision, but it sounds like it has been walked back in 18.

tomduncalf 4y ago
Interesting and an odd choice of behaviour in 17! I tested in a codesandbox with Next.js using React 17 and 18 and observed that only 18 did the double logging I was seeing, so assumed it was new behaviour in 18. Actually I guess I was seeing 17 silencing the double log.
jitl 4y ago
React also already ran components twice when devtools is open, even without strict mode. This happens in my React 16 codebase with silenced console.log and no StrictMode in sight.
- joshribakoff 4y ago
  I think you mean it logged log messages twice? I don’t believe having devtools opens changes the runtime semantics of the app.that would defeat the point of the devtools. I do know it annoyingly logs things twice
  - jitl 4y ago
    It doesn't log things twice, because DevTools replaces `console.log` and similar with no-op versions when they re-play the render. But it does call your component more times than you expect to power the DevTools hook inspector and other features. Here's the code that turns off `console.log`: https://github.com/facebook/react/blob/b8cfda15e1232554487c7285fb464f22705a23ce/packages/shared/ConsolePatchingDev.js#L10-L13 https://github.com/facebook/react/blob/b8cfda15e1232554487c7...
    - joshribakoff 4y ago
      I haven’t seen anything about devtools altering runtime semantics but I may be wrong, that is something I think I disagree with because of the possibility to have bugs that go away when trying to debug
supermatt 4y ago
It was like this even before strict mode was introduced.
lioeters 4y ago
Monkey-patching console.log sounds so hacky.. > In React 17, React automatically modifies the console methods like console.log() to silence the logs in the second call to lifecycle functions. However, it may cause undesired behavior in certain cases where a workaround can be used. > Starting from React 18, React does not suppress any logs. However, if you have React DevTools installed, the logs from the second call will appear slightly dimmed. React DevTools also offers a setting (off by default) to suppress them completely.
- SirHound 4y ago
  It is, I have lost tens of hours to this over the last couple years.
- marcus_cemes 4y ago
  Also, these types of global modifications make such libraries fundamentally incompatible with projects such as Tauri that focuse on safety and security. In a recent video of theirs they mentioned that of the popular frameworks, the only one that didn't seem to do any dodgy modifications of the global scope was Svelte (they didn't mention which frameworks failed the test, but I imagine React was one of them).
  - joshribakoff 4y ago
    It’s totally opt in, and in development only, so react doesn’t prevent you from using that other lib
SirHound 4y ago
It used to call render twice, now it runs effects twice also.
joshribakoff 4y ago
The hacker news post doesn’t even link to the article about what’s new in react 18: https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors https://reactjs.org/blog/2022/03/29/react-v18.html#new-stric... > To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

by Gravey 4y ago

tomduncalf 4y ago

Interesting and an odd choice of behaviour in 17! I tested in a codesandbox with Next.js using React 17 and 18 and observed that only 18 did the double logging I was seeing, so assumed it was new behaviour in 18. Actually I guess I was seeing 17 silencing the double log.

jitl 4y ago

React also already ran components twice when devtools is open, even without strict mode. This happens in my React 16 codebase with silenced console.log and no StrictMode in sight.

joshribakoff 4y ago
I think you mean it logged log messages twice? I don’t believe having devtools opens changes the runtime semantics of the app.that would defeat the point of the devtools. I do know it annoyingly logs things twice
- jitl 4y ago
  It doesn't log things twice, because DevTools replaces `console.log` and similar with no-op versions when they re-play the render. But it does call your component more times than you expect to power the DevTools hook inspector and other features. Here's the code that turns off `console.log`: https://github.com/facebook/react/blob/b8cfda15e1232554487c7285fb464f22705a23ce/packages/shared/ConsolePatchingDev.js#L10-L13 https://github.com/facebook/react/blob/b8cfda15e1232554487c7...
  - joshribakoff 4y ago
    I haven’t seen anything about devtools altering runtime semantics but I may be wrong, that is something I think I disagree with because of the possibility to have bugs that go away when trying to debug

supermatt 4y ago

It was like this even before strict mode was introduced.

lioeters 4y ago

Monkey-patching console.log sounds so hacky.. > In React 17, React automatically modifies the console methods like console.log() to silence the logs in the second call to lifecycle functions. However, it may cause undesired behavior in certain cases where a workaround can be used. > Starting from React 18, React does not suppress any logs. However, if you have React DevTools installed, the logs from the second call will appear slightly dimmed. React DevTools also offers a setting (off by default) to suppress them completely.

SirHound 4y ago
It is, I have lost tens of hours to this over the last couple years.
marcus_cemes 4y ago
Also, these types of global modifications make such libraries fundamentally incompatible with projects such as Tauri that focuse on safety and security. In a recent video of theirs they mentioned that of the popular frameworks, the only one that didn't seem to do any dodgy modifications of the global scope was Svelte (they didn't mention which frameworks failed the test, but I imagine React was one of them).
- joshribakoff 4y ago
  It’s totally opt in, and in development only, so react doesn’t prevent you from using that other lib

SirHound 4y ago

It used to call render twice, now it runs effects twice also.

joshribakoff 4y ago

The hacker news post doesn’t even link to the article about what’s new in react 18: https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors https://reactjs.org/blog/2022/03/29/react-v18.html#new-stric... > To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.