Bug: React hijacks console functions that may cause unpredictable behavior.

[infinnie]

React version: 17.0.0

Steps To Reproduce

1. Write the following code below:

   import React from "react";
   import ReactDOM from "react-dom";
   
   let i = 0;
   
   const origLog = console.log.bind(console);
   
   const App = () => {
       const [a, setA] = React.useState(0);
       origLog(i); 
       console.log(i + ': hijacked log');
       origLog("test");
       i++;
       return (
           <button
               onClick={() => {
                   setA(a + 1);
               }}
           >
               click me
           </button>
       );
   };
   
   const rootElement = document.getElementById("root");
   ReactDOM.render(
       <React.StrictMode>
           <App />
       </React.StrictMode>,
       rootElement
   );

2. While the origLog() function is called in every call to App(), the “hijacked” calls to console.log() would only call the original method every other time, and therefore only even numbers are logged by this function.

Link to code example:

https://codesandbox.io/s/jolly-bush-4ql7z?file=/src/index.js

The current behavior

React automatically “hijacks” the console’s methods to prevent duplicated logs, which might cause unpredictable behaviors.

The expected behavior

The original console methods are called by default even if in the component code.

[eps1lon]

This is intended behavior (introduced in #18547) that will be opt-out once #19710 lands in React devtools. Until then you can use a local workaround explained in #20090 (comment).

[infinnie]

This is intended behavior (introduced in #18547) that will be opt-out once #19710 lands in React devtools. Until then you can use a local workaround explained in #20090 (comment).

But that is bad—It’s been tripping users up like what has been posted in comments on the original pull request:

• Disable console.logs in the second render pass of DEV mode double render #18547 (comment)
• Disable console.logs in the second render pass of DEV mode double render #18547 (comment)

At least, were the console suppression to be kept, it should be explicitly stated in the documentation.

[gaearon]

Yeah we should definitely add it to StrictMode documentation. Would you be interested in adding a note there?

It’s been tripping users up like what have been posted in comments on the original pull request:

Yes, we understand it would trip users. Both behaviors trip users in different ways. From our experience so far, it is still net positive to silence the noise from the second log, but it does come with the tradeoff of confusing other people in other situations once in a while.

[infinnie]

Yeah we should definitely add it to StrictMode documentation. Would you be interested in adding a note there?

It’s been tripping users up like what have been posted in comments on the original pull request:

Yes, we understand it would trip users. Both behaviors trip users in different ways. From our experience so far, it is still net positive to silence the noise from the second log, but it does come with the tradeoff of confusing other people in other situations once in a while.

A pull request is opened in reactjs/react.dev#3426.

[eps1lon]

But that is bad—It’s been tripping users up like what has been posted in comments on the original pull request:

The previous behavior has as well. Neither state is perfect which is why the devtools option is on the table.

At least, were the console suppression to be kept, it should be explicitly stated in the documentation.

Sounds great. Though we had the previous behavior documented as well and people were confused by it as well. This will just take some time until this knowledge proliferated enough through the community.

[gaearon]

To follow up on this, we've changed the logging behavior in 18 to be more intuitive.
#21783 (comment)