Full React Tutorial #24 - useEffect Cleanup

Hey gang, in this React tutorial we'll look at how to create a cleanup function in our useEffect hook, to stop a fetch request when it's not needed.

🐱‍💻 🐱‍💻 Course Files:

🐱‍👤🐱‍👤 JOIN THE GANG -

🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Helpful Links:

🐱‍💻 🐱‍💻 Social Links:

[kristofferjohansson]

And all of a sudden I coded all 24 episodes. This is more addictive than Game of Thrones once was! I need more :)

[geometrydashjowinator]

For anyone who didnt get the error message (kinda ironic that we want to get an error message), my best bet is that react handles that by it self on newer versions. I still followed along with the rest of the video and had no problems so I'd advice you to not stress about that and keep enjoying the tutorial

[waynetasaki]

To everyone who didn't have an abort error but then when creating the cleanup function you got an error each time the page loads - REMOVE both React.StrictMode tags that wrap your <App/> component in your index.js file. I believe since strict mode is enabled, certain functions are fired twice and that's what causes the error to load even when you're not doing anything to truly abort the fetch.

If you want, you can just leave the strict mode tags and understand that in production, you would not receive the Abort Error and nothing is inherently wrong with your code. I hope this helps others who were stuck trying to understand why the hell the Abort Error kept popping up. 😀

[jasper]

I cannot believe that I started this series, finished 24 episodes and coded them as well. Thanks a lot for being an awesome teacher.

[SergeiFedorov]

These tutorials are great! Many years ago I watched your vue/vuetify tutorials and I've been using those at work since then with great success! Now I'm aiming at learning react which is not too hard after knowing vue. Two notes: I'm on react v18.2.0 and react-router-dom v6.4.3 and using React.StrictMode makes the "useEffect" run twice. Furthermore the routing seems to be "exact" by default now and switching routes while the fetch of data still is in progress does not seem to cause an error.

[LiteBusigt]

Thank you for these videos. You are honestly the best teacher on YouTube I have found. I watched your Flutter&Firebase series and loved that too, thank you!

[whereislolly]

This is the most beneficial channel on Youtube. Thank you so much, Shaun.

[MasterMathematicswithMatthias]

It's like telling an interesting story. I cannot stop wachting it. I put this whole weekend on this.

[afxcrush]

This is the most understandable and precise tutorial series of all youtube

[Corolley]

Mr Net Ninja, I normally don't post a comment under any YouTube video but I just want to thank you for your video's. You've got a talent for clearly explaining the syntax and logic of React and React-based frameworks. Without your help, I'd still be tasting in the dark. Keep it up, and I will foward your video's to my fellow colleagues, they'll for sure love them too!

[vikash-kumar-gupta]

While learning React on this tutorial here, I did also learn about cancelling any API call before component tear-off. Thank you for making other related concepts clear through your videos. This learning can be utilized in any framework while doing fetch and cleanup.

[saida]

Thank you, Master. You charged my day with the extra mile with tuts. As always you are the best. Thank you very much for this cleanup video

[michaeleyitayo]

Omo. Thanks so much for explaining clean up like this. This is the best I've seen so far

[raymondmichael]

I can finally cross this off the list, cleanup was such a big pain in my head.
I had to visit this series hoping you can help, it was a perfect guess.
Thanks dude, happy break.

[nikhildhakal]

Didn't get the mentioned error but seems its better to add this in case of slow servers. Worked smoothly.

[andrewperez]

Wow easily the best explanation on this topic! I feel like this was overlooked by people when they teach useEffect. Would have never known about the about signal. Thank you!

[DragonwingZify]

In the documentation about the React.StrictMode if anyone is using version 6. They introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.
Basically from what I've read is, they are saying we don't have to use the useEffect Cleanup because the React.StrictMode is handling the function for us.
If anyone has an idea of why we should still use the AbortController I would like to know.

[DebugWithAdam]

I just revised myself in less than 48 hours, great content

[nanayawfreduah]

Thank You Very Much For The Precise Yet Indepth Explanation

[webdev]

you are my best teacher... one day I might meet you in person and thank you for all you have done.