Solving the React 18 Double Render problem on useEffect

React 18's useEffect hook now double renders (with the empty dependency array) which has caused a stir in the React community. First render animations and many packages have broke being unprepared for this change. useEffect with the empty dependency array is double rendering in React Strict Mode - but on purpose. In this video, we talk about what's happening with useEffect exactly, why React is doing this now in v18 and how to solve the useEffect double render "problem"

CONNECT ON MY DISCORD:

#react #useeffect #react18

0:00 Intro

0:50 useEffect demo before React 18

2:00 useEffect demo after React 18

2:30 What React 18 is doing and why

3:30 Developer misconceptions about useEffect

4:20 The problem with quick re-mounts on components

5:30 useEffect problems on double render

6:30 How to clean up useEffect to deal with a double render

9:00 Further problems if you try to remove React Strict Mode

12:30 Another example on cleaning up useEffect to deal with double render

14:00 Summary

[masaeedi]

This is the content i wanna watch, not devs straight up bashing some framework but explaining the issues

[devve]

Great Job !!! Thnks. - My headache is now off.😁

[tejindersingh]

Thanks Man. I'd read everything last night on it's official website. Many things cleared. But not fully understood. But your button example cleared everything. Thanks a lot.

[tiberiumunteanu]

I had exact the same problem with gsap. I didn't expect to get directly the solution to my problem :) . Maybe adding Gsap example in title, or description, will make this video more popular . By the way, your style of explaining is top notch

[keifer]

I'm new to React but could still understand for the most part. You have good explanations, man

[alxvedder]

Thank you! For a day I was trying to figure out why those gsap animations work in showcases, but in my project the same ones are mercilessly broken

[ekenennabugwu]

Now this is the exact issue I am having with double rerender with useEffect

[iskandermuhutdinov]

Realy indresting. Thx for informacion!:)

[ThaRealIansanity]

"whatever I do I can't break this" lol lemme see it. I'll break it somehow. I actually came to this video because of a issue I was having with storybook and it turned out I had a mistake in my api hook. I thought maybe it was because of the double render but it wasn't. Sill I stayed for the excellent detailed explanation and learned something. Thanks

[RickMartinez-ulcf]

I'm buying you a beer for this, thank you so much!!

[darknight]

it is good example .
thanks for explanation

[flopasen]

thanks i had this causing me grief while gpt-4 was hanging me out to dry, glad a human solved the problem for me 🤣

[kwadoskii]

I always forget to use the return in useEffect

[Ricardoromero]

Video could've been 6 minutes lol
Still, very useful info

[koushayeganeh]

confusing subject, but explained well

[anilchaudhary]

Not all the code in useeffect has subscriptions. The mentioned usecase is where you need to clear subscriptions.
But not always. I feel it's even becomes more unintuitive when dependency comes in. I think better usecases should have been shown here

[MrJuancho]

Im having the same re rendering problem but with onauthstate in firebase, ill try to make a flag so oneffect dont happen until certain conditions (or kill it lol) thanks for the video!

[ekenennabugwu]

How do you solve a toast with useEffect

[ekenennabugwu]

I have an existing issue with useEffect, am dispatching a redux toolkit function using useEffect on render the toast pop out twice which is very annoying

I tried all I could on it but no head way

[tejindersingh]

I have one question. I use abort controller in useAxios hook as a cleanup function on unmount. How to manage this. Thanks in advance.