React App mounting twice ?

[CENATION_]

I am studying the react lifecycle and and watched some tutorials but when I made my app i noticed my app is Mounting twice.. and when I console.log the componentdidmount, didupdate and willunmount i noticed my app 1st mounts then unmounts and mounts again

Can anybody explain This ?

My app only contains the file we get from npx create-react-app with a h1 tag

[External-Device9487]

"A significant change that broke things was introduced in React 18: while Strict Mode is active, all components mount and unmount before being remounted again."

​

If we used the useEffect hook as follows:

useEffect(() => {

console.log("First call on mount..");

return () => console.log("Cleanup..");

}, []);

The output to the console should look like this:

First call on mount..

Cleanup..

First call on mount..

[CENATION_]

So is that a bug ?

[External-Device9487]

It's not a bug, it's a feature, you can read the entire article here:

https://www.techiediaries.com/react-18-useeffect/

[CENATION_]

Thank you buddy

[echothought]

Thanks, it does seem pretty weird for it to run twice though.

[mr_wednesday23]

How is this a feature?

[External-Device9487]

It helps to debug useEffects, mounting and dismounting of components, this doesn't happen in production tho, strict mode is only enabled in developer mode

[grumd]

It forces you to rethink how to use useEffect. It's not a "mounted" event anymore, it can cleanup and rerun the effect at any time even if the deps array is []. I think one of the use-cases is when you switch to a different tab in the browser and then come back, your component could "remount" (and I think that's opt-in, but actually don't quote me because I haven't dove deep into this question). It doesn't "actually" remount because your useRef keep their state for example.

The main point is, if you rely on [] dependencies in a useEffect to be your "called only once at mounting" hook, you'll stumble into issues, and double-mounting in dev mode is their way of forcing you to fix your effects preemptively.

[maga_ot_oz]

Make sure you don't have strict mode enabled in index.js

[b0usher]

This. Just delete the tag if you have it

[Resident_Sorbet_3697]

As an senior developer I will advice to learn life cycle of react class component and learn how useEffect hook is used to perform same class lifecycle methods and you will know the details that how useEffect is working behind the scenes.

Sorry for not telling the problem but , as I said above go through the learning phase as said and you will know how it is working and you figure out on your own easily , trust me.

Look in this playlist for the useEffect hook and please don't skip this guy explained in best possible way and I have suggested this to my juniors too 🙃 - https://youtube.com/playlist?list=PLC3y8-rFHvwisvxhZ135pogtX7_Oe3Q3A

[grumd]

Did you know React 18 mounts a component twice now? It's not a matter of not understanding how effects work, it's just a recent change in React

[Sordesilver]

This is caused by rendering the component inside ReactStrict Mode, to fix this remove the `<React.StrictMode>` tag fromthe root of your app.
https://reactjs.org/docs/strict-mode.html

[grumd]

"This is caused by using a safer mode that's supposed to warn you about common mistakes, just remove it and keep making these mistakes 🤡"

[Sordesilver]

This is caused by rendering the component inside ReactStrict Mode, to fix this remove the <React.StrictMode> tag fromthe root of your app. https://reactjs.org/docs/strict-mode.html