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 the strict mode? Can I disable it? What is Strict Mode? Do I need it?

Elastance

StrictMode should be removed as a last solution. For a more detailed answer see #72238675. – Catechize

Here is the answer from the React documentation (source: I wrote it). I wish this was ranked a bit higher. react.dev/learn/… – Taboret

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')
  );

Redbird

The docs reference the intentional "double invoking" in Dev mode: "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" – Hodosh

Had an event listener invoked twice and was wondering why. Seems the strict mode was the cause. Thx! – Doyle

@JakubKvba no, this has nothing to do with event handlers, only with effects – Afterglow

For Next.js devs, you can disable it by setting "reactStrictMode: false" in next.config.js file. – Florida

This has to be done in src/index.js file – Immersion

Thanks a lot! I had tested so many things before and nothing was helping. – Advise

StrictMode should be removed as a last solution. For a more detailed answer see #72238675. – Catechize

Here is the relevant part of React docs: react.dev/learn/… – Taboret

@Afterglow Most people set their event listeners in useEffects – Sieracki

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

Graiae

If I might add, if you keep it on, it will help you write more resilient components by helping you notice bugs earlier. So it's not like you need it, but it's very recommended that you use it. Do note that the double-rendering only happens on development, it doesn't occurs on production. – Await

@Await How do I remove it? or, put my App in Production mode? <React></React> gives an error.. – Elastance

Just remove the <React.StrictMode> that wraps over your app and it will be fine. – Await

you missed out the trailing comma after {app} like this {app}, – Huarache

StrictMode should be removed as a last solution. For a more detailed answer see #72238675. – Catechize

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,
}

Ashmead

You are right, it is by default true, and setting reactStrictMode to false would solve the problem, but also we should keep in mind as nextjs docs recommends, keeping reactStrictMode true, can also be beneficial: nextjs.org/docs/api-reference/next.config.js/react-strict-mode – Balanchine

StrictMode is there for a good reason. Disabling it is the last thing to do. For a more detailed answer, see https://mcmap.net/q/64783/-why-useeffect-running-twice-and-how-to-handle-it-well-in-react – Catechize

Answer 4

In a React app with StrictMode:

• If you are seeing dual console logs like this:

• And if you know that StrictMode helps you optimize your app in some way

• And you don't want to disable StrictMode entirely

Then:

The React Developer Tools Chrome Extension offers an option to Hide logs during second render in Strict Mode. To enable that:

• Install the extension.
• In your Chrome Developer Tools window, a new tab called Components is created. Click on it.
• Then click the gear icon inside the components tab.
• Then select the Debugging tab, and check the option to Hide logs during second render in Strict Mode.

You will no more see the dual logs in the console.

Amharic

Unfortunately I still see. Also after re-opening the tab. – Poitiers

Answer 5

if you are using nextjs and you want to disable strict mode go to your next.config.js file and set reactStrictMode to false

module.exports = {
reactStrictMode: false,
};

but strict mode is recommended for development once you check if the double mount is caused by stric mode it's preferable to enable it

Teutonize

Answer 6

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

Sheenasheeny

I think it's your bug. Maybe your state is a nested object. You should destructure it completely – Suzettesuzi

Yeah, I am also facing this issue even with react 18. I am manually deleting one node. Also, sometimes I remove React.StrictMode to confirm if the issue is caused by it or if there is some bug in my code. A bit painful and time-consuming process. – Resourceful