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

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 https://github.com/facebook/react/pull/18547) that will be opt-out once https://github.com/facebook/react/pull/19710 lands in React devtools. Until then you can use a local workaround explained in https://github.com/facebook/react/issues/20090#issuecomment-715927125.

[gaearon]

To follow up on this, we’ve changed the logging behavior in 18 to be more intuitive. https://github.com/facebook/react/issues/21783#issuecomment-1083412766