Hide console output that is duplicate in React project

Alper ÇÜN — Tue, 12 Jul 2022 12:18:04 +0000

Hello folks, today I will tell you how to solve the console repetition problem in a React project created with CRA. It is strict mode that causes this console duplication issue. If the duplication problem in console bothers you, you can hide this duplicate console output through react developers. Let's take a look at how to fix this console duplication issue.

We create our project with

npx create-react-app <my-app>

and run our project with

yarn start

Our index.js output looks like this.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

We add console.log('Hello react') in App.js. Our App.js output looks like this.

import logo from './logo.svg';
import './App.css';

const App = () => {
  console.log('Hello react');

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Now in this case, let's open the console in the developer tools and examine what we will encounter.

Hmm.. It seems that we see 2 Hello react texts on the console screen. But we wrote one. This is the console output shown to us by react strict mode, which has a low opacity. If you want to turn it off, all you have to do is enable the feature to hide duplicate logs values through this react devtools.

TADAA 🎉🎉

console.log shows our output once.

If you want to learn more about solving this problem, you can check the related PR.

DEV Community: Alper ÇÜN

Hide console output that is duplicate in React project