React rendering twice

There is this weird behaviour in React that I came across while logging something in the console. Everything is printed twice.

It was quite confusing for me initially but later I figured out what was causing it.

The React app I had created using the create-react-app and inside this boilerplate the entry file is rendered in a strict mode.

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

This React.StrictMode renders the application twice in the development mode to check the side effects and the bad code and practices.

If you remove this, your app will be single-rendered.