Why react App rendering twice?

When using React.StrictMode in the application, react will render twice in development mode. This is to make sure that there are no side effects. however in Production environment, it only renders once.

// index.js
// this will render everything twice in dev env
<React.StrictMode>
    <App />
</React.StrictMode>

//app.js
function App() {

  useEffect(() => {
    console.log(`In useEffect.`);
  });

  return (
    <div>
      {console.log("In rendering")}
      <h1>This is react app</h1>
    </div>
  );
}



// Console logs showing twice
In rendering
In rendering
In useEffect
In useEffect

If you want to avoid to render twice in the development environment, remove React.StrictMode mode in index.js file as shown below.

// index.js
// this will render everything only once in dev env
<App />

//app.js
function App() {

  useEffect(() => {
    console.log(`In useEffect.`);
  });

  return (
    <div>
      {console.log("In rendering")}
      <h1>This is react app</h1>
    </div>
  );
}



// Console logs showing once
In rendering
In useEffect

Please do not confuse app rendering twice with useEffect() hook rendering twice. useEffect() rendering is based on app component lifecycle methods. You can check more details about useEffect in this article.