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?

`StrictMode` should be removed as a last solution. For a more detailed answer see https://stackoverflow.com/questions/72238175/useeffect-is-running-twice-on-mount-in-react. — Youssouf Oumar, Oct 28 '22 at 13:00
Here is the answer from the React documentation (source: I wrote it). I wish this was ranked a bit higher. https://react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development — Dan Abramov, Apr 01 '23 at 23:02

score 628 · Answer 1 · answered May 19 '20 at 17:52

628

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

answered May 19 '20 at 17:52

rangfu

6,878
2
16
17

21

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
1

Had an event listener invoked twice and was wondering why. Seems the strict mode was the cause. Thx! – Jakub Kvba Jul 21 '22 at 13:13
@JakubKvba no, this has nothing to do with event handlers, only with effects – skyboyer Aug 02 '22 at 08:20
10

For Next.js devs, you can disable it by setting "reactStrictMode: false" in next.config.js file. – Mahmoud Sep 19 '22 at 21:13
This has to be done in `src/index.js` file – Myo Win Sep 20 '22 at 06:47
Thanks a lot! I had tested so many things before and nothing was helping. – madsongr Oct 14 '22 at 19:31
6

`StrictMode` should be removed as a last solution. For a more detailed answer see https://stackoverflow.com/questions/72238175/useeffect-is-running-twice-on-mount-in-react. – Youssouf Oumar Oct 28 '22 at 12:59
2

Here is the relevant part of React docs: https://react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development – Dan Abramov Apr 01 '23 at 23:03
@skyboyer Most people set their event listeners in useEffects – Master117 Jul 17 '23 at 15:55

score 39 · Answer 2 · edited Oct 22 '21 at 13:56

39

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

edited Oct 22 '21 at 13:56

Nick Mitchell

1,207
13
24

answered Apr 16 '20 at 15:47

Haris Shafiq

513
3
5

10

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
1

@Jackyef How do I remove it? or, put my App in Production mode? `` gives an error.. – Marry Joanna Apr 16 '20 at 15:57
4

Just remove the `` that wraps over your app and it will be fine. – Jackyef Apr 16 '20 at 16:04
1

you missed out the trailing comma after {app} like this {app}, – kimilhee Dec 21 '21 at 03:30
2

`StrictMode` should be removed as a last solution. For a more detailed answer see https://stackoverflow.com/questions/72238175/useeffect-is-running-twice-on-mount-in-react. – Youssouf Oumar Oct 28 '22 at 13:00

score 26 · Answer 3 · edited Aug 07 '22 at 15:12

26

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

edited Aug 07 '22 at 15:12

lazybot

61
2
7

answered Jul 18 '22 at 14:46

sgoran

826
8
13

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: https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode – Elyas Karimi Sep 14 '22 at 12:31
StrictMode is there for a good reason. Disabling it is the last thing to do. For a more detailed answer, see https://stackoverflow.com/a/72238236/15288641 – Youssouf Oumar Dec 16 '22 at 09:05

score 8 · Answer 4 · answered Jan 11 '23 at 09:37

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.

Unfortunately I still see. Also after re-opening the tab. – nurp Jul 03 '23 at 13:09 — nurp, Jul 03 '23 at 13:09

score 0 · Answer 5 · answered Apr 12 '21 at 17:29

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

answered Apr 12 '21 at 17:29

Ziriax

1,012
10
19

I think it's your bug. Maybe your state is a nested object. You should destructure it completely – Gorkem Sevim Oct 19 '21 at 07:37
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. – Akash Kumar Seth Jun 17 '22 at 18:27

Ahmed Sbai · Answer 6 · 2023-01-19T02:50:24.327

0

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

edited Jan 19 '23 at 02:50

answered Dec 22 '22 at 00:27

Ahmed Sbai

10,695
9
19
38

My React Component is rendering twice because of Strict Mode

6 Answers6

Linked

Related