My React Component is rendering twice because of Strict Mode

Question

My React Component is rendering twice. So, I decided to do a line by line debug and the problem is here

 if ( workInProgress.mode & StrictMode) {
        instance.render();
      }

React-dom.development.js

Is it because of strict mode? can I disable it? What is Strict mode? Do I need it?

Answer 1

StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them (which can be quite useful).

If you have StrictMode enabled in your app but don't remember enabling it, it might be because you used create-react-app or similar to create your app initially, which automatically enables StrictMode by default.

For example, you might find that your {app} is wrapped by <React.StrictMode> in your index.js:

  ReactDOM.render(
     <React.StrictMode>
       {app}
     </React.StrictMode>,
    document.getElementById('root')
  );

If so, you can disable StrictMode by removing the <React.StrictMode> tag:

  ReactDOM.render(
    {app}
    document.getElementById('root')
  );

Answer 2

Yes you have to remove Strict mode as

Strict mode can't automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions: Class component constructor , render , and shouldComponentUpdate methods.

Source: React Docs: Strict Mode

Answer 3

For Next.js user here like my-self, strict mode is also enabled by default and causes this issue.

You can disable it in this way

// next.config.js
module.exports = {
  reactStrictMode: false,
}

Answer 4

It seems the component renders twice, but the first rendered component is not unmounted? At least that is the behaviour I'm seeing with React 17, might a bug in my code of course