React 18: useEffect Double Call; Mistake or Awesome?

Is React 18 double calling useEffects a mistake, or a sign of an awesome feature that will help you build more reliable components? Let's find out!

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

0:00 Introduction
1:10 Example Setup
3:32 The (Not) Problem
5:04 What Strict Mode Covers?
6:24 The (Not) Fix
7:56 Migrate Heavyweights Off Of useEffect
8:40 Is It A Good Developer Experience?
10:14 Outroduction

#reactjs #react18 #react_useEffect

[jaortiiss]

10 minutes of accurate explanation. Pure gold. Thank you Mr. Herrington!

[RandomMcLain]

I didn't try React 18 yet, but this video analysis served as the first move of upgrading. Thanks, a lot Jack, the way you explain helps me understand these concepts perfectly, I feel more confident and enjoy coding even more.

[shadowangel]

I love you, spent all day trying to work out why one of my components was getting double called with a similar set interval function.

[juliancaceres]

I had an awful experience at first with useEffect and its double call on React 18 while updating an app's dependencies. Now I get it. Helpful to avoid future bugs. Thank u!

[xenialxerous]

Hey! Thanks for the video, it was helpful. I was going through different rabbit holes and was getting a bit mind boggling. I couldn't refer to the official React documentation lately and hence felt falling behind. Thanks for stressing the point to build the "idiomatic" react apps, that does re-emphasized the way I approach building them.

[alisonhj]

I'm watching it again and I wish I could double like it!
Thanks a lot, Jack!

[AM-nmts]

waow thank you so much . You have a natural talent for explaining things well.

[artemy]

I'm watching your channel for the first time. I really liked it. Keep making content! Greetings from Russia with best wishes.

[ernestdrozdz]

helped a lot, thanks! I just upgraded to 18 and I was confused what the heck is happening with my app :D now I know.

[moretimeproductions]

Thanks a lot for this great and informative video!

[jornejongsma]

This is a blessing! And I am, was now, also one of those who didn't get this double call, so just removed that stupid StrictMode. But I also am one of those who wanted to know if my cleanup really works but didn't know how to. So here it is, great!

[MrPlaiedes]

I think SolidJS is looking better and better.

[kmylodarkstar]

I think in terms of DX retro compatibility if something could be called as this, should be good if you could choose if you want some new strict mode behavior like this or disable adding some disableDoubleEffect prop on this StrictMode comp. Thanks, nice video about this new "feat"

[alfredomoreira]

Hello Jack,
I think it's a mistake. Let me explain why.
They activated this because of react 18 concurrent mode. And they are telling developpers that even on production this behaviour could happen, so they are now doing it on strict mode everytime so developpers are aware of it and don't spend hours understanding why they have sometimes this weird bug on production.
So now in concurrent mode, components rendering is an interruptible process. meaning, component can be mounted, then finally unmounted because rendering was cancelled, then mounted again.
This change, means that if you want to enable concurrent mode, and you used useEffect to fetch data, you will now need to change all your code (and this can be huge) to trigger fetching outside of useEffect or use third party libraries for fetching correctly (react-query is happily unnaffected because thanks to caching they already deduplicated concurrent calls).
Like the migration guide tells us, this is BREAKING CHANGE.
I would have hoped that with this breaking change they had introduced easy helpers, like a useUncancellable() or something for use cases where people don't want to use thirdparty store / event / fetching library.
Now community has to handle it with mixed understanding of the problem and different solutions to something that was not an issue before.

[randmtv]

It did trip me up because I forgot it's a thing. I was wondering why my API call was triggering twice on mount. Half an hour of debugging and I remembered that React 18 triggers double mount. Don't mind it at all, but it can be confusing.

To be honest, it feels like React is getting more complicated in general. All quirks, re-rendering logic and other things can be hard to juggle in your head at the same time. Hopefully bunch of these manual steps we have to do these days will be resolved with React Forget and useEvent (in RFC at the moment) in the future. I'm working with React on a daily basis for over 3 years now and it can still trip me up and confuse me with useEffect, memoization and other things. Unfortunately, I don't have that much experience with any other frontend framework so I cannot say what is their complexity level compared to React.

[MrMudbill]

Maybe I'll give StrictMode another try. I ended up disabling it because of this side effect. Not because the code was buggy per say, but I just really didn't like seeing API calls fire twice in the network dev tools. Made it very confusing if I was specifically debugging the network call itself, plus it puts unneeded strain on the back-end.
Since then I have begun to use react-query so perhaps I wouldn't notice if I re-enabled StrictMode.

[alextribal]

How would you even go about moving API calls into a state manager like Zustand? Where would you put the fetch? Inside of the store.tsx? What even is a 'subscription'? A tcp connection?

Sorry for the barrage of questions!
P.S. Your videos are probably the best I've seen. The format and flow make everything easy to understand. Great teaching Jack

[John-Dennehy]

This might be the best decision in the current scenario, but the fact it isn't immediately clear to everyone means it is still a poor developers experience regardless of the thought that went into it.

[damiangilz]

I'm a true believer that a "second generation" of React should be created, with a lot of cleanups. React is a beast that has got into monkey patching a lot of stuff.

[OetziOfficial]

Something that supposed to be called once, should not be allowed to be called twice. Why bend the rules of DX? Its like telling lightspeed to be a little bit faster than the max. I hate the new useEffect implementation since it introduces more confusion than improvements. I wont change my mind since it's a step back, and not forward. I don't want to code a workaround for that, but have to live with the side-effects... Development should be as close to Production as

still, great video!