52

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?

Marry Joanna
  • 533
  • 1
  • 4
  • 5

3 Answers3

195

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')
  );
rangfu
  • 2,439
  • 1
  • 15
  • 15
  • 5
    Should be the answer. This is not highlighted anywhere. Could you share some ref links from react docs? – manjs Jun 11 '20 at 15:04
  • 2
    @manjs I'm afraid I learned this "the hard way", not sure if there are any docs about it. – rangfu Jun 12 '20 at 11:57
  • 2
    The [docs](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) 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" – Nick Mitchell Oct 21 '21 at 03:09
  • 2
    Oooh, strict mode was driving me insane there for a while... – Jörgen Sigvardsson May 06 '22 at 05:02
  • 2
    Brutal!! losing my head with this!!! BIG THANKS man!! – Juani May 06 '22 at 16:54
  • 1
    As a React beginner, this was driving me crazy. Thanks ! – LSE May 09 '22 at 10:44
  • removing strict mode unveils the thief, thanks. I was following a tutorial, my component was updated twice on the first run but it was once for the instructor, probably because of the different React version – Muhammad Uzair May 29 '22 at 20:28
13

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

Nick Mitchell
  • 1,117
  • 12
  • 23
Haris Shafiq
  • 153
  • 5
  • 3
    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. – Jackyef Apr 16 '20 at 15:48
  • @Jackyef How do I remove it? or, put my App in Production mode? `` gives an error.. – Marry Joanna Apr 16 '20 at 15:57
  • Just remove the `` that wraps over your app and it will be fine. – Jackyef Apr 16 '20 at 16:04
  • you missed out the trailing comma after {app} like this {app}, – kimilhee Dec 21 '21 at 03:30
0

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

Ziriax
  • 974
  • 9
  • 18