Full React Tutorial #24 - useEffect Cleanup

[@geometrydashjowinator1936]

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

[@feliciaf8]

ooo that's why i didn't get it

[@mihajlocolic01]

I just thought of googling if that's covered in newer versions. Thanks for letting us know.

[@frontend3409]

I assumed that's because i've used v6 (still followed along with the videos), but looks like it's not. thanks

[@berzolka]

Thanks for the info. It was a bit confusing. that I didn't get the error.

[@izleogrenkodla]

It is not new v6 react-router, it is newer version React. So you will not get an error since React will automagically handle it.

[@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 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. 😀

[@youssefmokhtar1058]

I didn't get an error in the first place, is that because I'm using version 6 of react router instead of 5?

[@sahajatantra]

Thanks so much. I was wondering about this. And i was already wondering for quite a while why certain functions are always fired twice - now i finally know.

[@therameez92]

Thank you, your comment answered my questions.

[@frubas4127]

I was about to go mad because of this :)). Looked for an answer on this on the internet for a while now. Thank you so much. You just saved me minutes if not hours of just browsing the web

[@alaasayed6508]

thanks for ur comment , it really helped me

[@kristofferjohansson3768]

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

[@raymondmichael4987]

He has a way of ending an episode which make you wish for more.

[@ericmomoh7927]

Exactly and is way enjoyable.

[@reenasoni3938]

hahaha

[@soumadip_banerjee]

Kudos ❣️😊

[@jeeadvanced1230]

Yes ❤❤❤❤❤❤❤

[@jasper5016]

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

[@Hacking-NASSA-with-HTML]

Hi! Did you make it in a single day 🤔?

[@SergeiFedorov77]

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.

[@Hacking-NASSA-with-HTML]

exactly 👍 and react-router-dom is v6.6.1 Everything Changes quickly😁

[@newesttechdesigninnovation8121]

Im in a coding bootcamp called nucamp and your videos help me more than them. Omg your the only coding youtuber i understand trust.

[@mustafasaitkonuk3519]

I am confused. I don't get an error like you said but i don't get console message "fetch aborted". IDK what i have done wrong :D

[@feliciaf8]

same it doesn't cause even if i don't use clean up

[@Pupu._]

best, best, best teacher ever

[@NetNinja]

Thank you!

[@mkmalikcom]

ya, right 👍

[@MasterMathematicswithMatthias]

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

[@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.

[@wheeler553]

Yeah idk, I removed Strict mode and I'm still not getting any error in the console and everything is working fine

[@leonardomalave2569]

@@wheeler553 same as you but im using 5.3.4 version, but are u getting functions fire twice on console?

[@wheeler553]

@@leonardomalave2569 yes

[@art1co]

@@leonardomalave2569 me too, i dont have the error and i'm having the function twice in th console, if i cut the switch mode, i don't have the print out twice anymore, but still no error for the unmount if i don't have the clean up, annyway, great tut anyway

[@astik2002]

so all in all, if Im using v6 of react dom I don't need to use useEffect Cleanup??

[@LiteBusigt]

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

[@whereislolly]

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

[@afxcrush41]

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

[@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.

[@nikhildhakal3727]

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

[@Troglodyte2021]

I tried setTimeout to 3 seconds, still no error. I guess I will simple skip this video and move on to the next. :)

[@Corolley]

Mr Net Ninja, I normally don't post a comment under any KZbin 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!

[@saida584]

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

[@TheBobby2908]

this channel is a goldmine.

[@DebugWithAdam]

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

[@michaeleyitayo]

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

[@raymondmichael4987]

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.

[@andrewperez7844]

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!

[@hm.8211]

this is so addictive. great tutorial!

[@moisen8773]

Hi Shaun, is it normal that I am not getting any error?, like you had. Even before I add the cleanup function, everything seems to be working correctly. When I write the return function in useFetch, and console.log('fetch aborted'), I can see the log in the console. But when I add the if/else statement in the catch err function, and return ()=> abortCont.abort(), I am not receiving any log, and no error, every thing still work... 🤔. Sorry but when I am not seeing any error, and all still works, that's weird and suspicious 🤨. I must be missing something.

[@alexander5582]

If remove artificial setTimeout func -> there won't be any err-s at all (had the same question)

[@moisen8773]

@@alexander5582 Thanks, for the info.

[@chrisandrew8646]

I have the same problem... or actually... lack of problem. I am wondering why I am not getting the error that should be generated by jumping between the buttons at the 0:32 mark... thanks

[@bidishapal4339]

Stuck in that exact same point. Not getting any error. Also, when I write cleanup in console, while switching b/w pages, it comes like - Cleanup Cleanup Cleanup While the message in the video comes like - Cleanup (1) Cleanup (2) Cleanup (3) No clue where I went wrong!

[@voice_famous_books4301]

I asked the same question above. So I'm hoping someone to answer that:)

[@webdev4786]

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

[@nanayawfreduah]

Thank You Very Much For The Precise Yet Indepth Explanation

[@IvanBankovic-k6n]

If it aborts the fetch why it does not abort it immediately but only after you click on another page?

[@boyiscola]

If the cleanup message is not working as in the video, comment out React.StrictMode in index.js.

[@tichaa]

This was quite helpful to me

[@omeatai]

Thanks a bunch! I was looking out for the solution.

[@andromilk2634]

By curiosity, why is it that you keep talking about state of the Home component even though we have moved the state instead to a hook? Isn't the state the exclusive property of the hook now, and we're just receiving the data from it to our component? (Which happens to be unmounted by the time the fetch has finished) Or am I not understanding?

[@wheeler553]

I'm not getting the error you're displaying, I'm using async/await instead of promise chaining and I have the setTimeout on as well, but everything is working fine no errors thrown.

[@neoz225]

U don't need cleanup anymore for react router v6, it's handled by itself using the new routing method i.e component routing

[@BearIsAwesome97]

The best tutorial on react

[@Dexter101x]

With your accent, I thought y you meant something else at 2:55 🤣

[@JesusSanchez-cd3ze]

Lmao

[@petarp3938]

Lol right, i came down to see if someone else already commented on it. "ye fookin cont" i bet he says.

[@tomasburian6550]

Good job, Mr. Ninja, learned a lot!

[@elgizhasanzada]

This annoying warning finally solvedd damnnn. Thanks so much

[@shadebinder3599]

i dont get the error you get from switching pages quickly, does this have to do with something about how from react 18 it automatically mounts and mounts or something when you first load? I always get two usefetch messages bec of that

[@geometrydashjowinator1936]

Who would have thought that not getting an error would be a bad thing lol. i didnt got it either, my guess is that newer versions of react handle that for us

[@Unknown_22-z8c]

Does v6 react router dom automatically handles abort controller, because it seems i'm not getting any warning messages even with commenting react.strictmode?

[@destroyerajdev]

I think it does so, I've been trying to get the error but it hasn't popped up

[@rexrider4916]

i also think it does i cannot get the error

[@ebadrahman1832]

best tutorial in the web ❤

[@NetNinja]

Wow, thanks! :) hope it was helpful

[@voice_famous_books4301]

Hello and thanks The Net Ninja:) My code doesn't show an error about fetch even when I don't use 'AbortController'. Why? My React version is 18.1.0 and RRD version is 5.3.3 . Is it relevant to my versions?

[@avatr7109]

HOLLLY FOCCK this is the 24th Lesson i dont know how much time I Sat . This is so well Taught....its addictive 🤪🤪🤪

[@icetmzz9074]

im using v6 and not getting this error. Why's that?

[@yogyyconst]

because you using v6

[@jeffgoes4116]

Thank you for an amazing explanation!! I have a question You showed us how to use the signal parameter in a fetch method but what if we used other http client like axios?

[@saidakhmedagitaev]

Thanks for the series, Shaun. Is there any chance to show us how to use less common hooks (useMemo, useRef etc.) as well, as a part of the series?

[@NetNinja]

Hey, those two hooks are not in this series, but I will be making some more one-off videos about lesser-used hooks at some point in the future.

[@khushikavya2555]

can anyone help with "Failed to fetch" error ?

[@himalayagupta7744]

You are one of a kind. Excellent Teaching

[@israeldearaujo94]

I used async await instead of then and I did not use setTimeout. It worked well and I didn't see the error showed in this video. And I tried a lot of times.

[@wheeler553]

me neither...

[@yoooc25]

thank for this best toturial, one question, when i'm clicking the home or the New Blog link in the navbar i see the browser change to correct link but the page not changed. only if i'm clicking "enter" on browser to link that changed i'm getting the right page.. Someone help?

[@David-fy1sn]

Is there a possible link to know or understand why or when the abort signal is fired off?

[@VoxyDev]

lol udemy instructors are shaking if u continue to keep your work as greate as this :)

[@AtitManandhar]

Thank you for this knowledgable content. Really appreciate it.

[@jamesmalarkey7437]

Tight, Tight, Tight. React, Vue, Angular doesn't matter just keep teaching me it.

[@majdkhasib76]

I thought that I am good in React until I saw your AMAZING videos! I will recommend them for my firends as well! Thank you so Much sir!

[@MustafaMohamad-nd9bw]

Great tutorial, thank you. is it possible for the home component to be unmounted right after the fetch but before all the states finish updating. If so, I guess we would have to handle this case.

[@chrisandrew8646]

I'm not able to replicate the error message that should be generated by quickly clicking between the "Home" and "New Blog" buttons... I've tried setting my network speed to simulate a slow 3g connection... I've also tried increasing the time of the setTimeout function. Can anyone advise what is a possible way to simulate the error message. My code is exactly spot on in line with the tutorial... perhaps some Chrome setting? idk... 8) thanks. These tutorials are excellent. What a wonderful instructor and teacher.

[@chrisandrew8646]

Hello, I thought I'd share what was causing me not to see the error message as it appeared in the video. I noticed that I actually wasn't ever reaching the Create.js component, and it was down to having left out the "exact" part before the Route path attribute in the App.js file... doubtful that anyone will be having the same issue due to the same oversight, but the moral is to check your code... check, check and then double check. And thanks again to the NetNinja for these amazing tutorials. Thanks

[@RadeonVector]

I still get the "Warning: Can't perform a React state update on an unmounted component. " error, anyone figured out what's up?

[@shashankpandey1966]

short and to the point ...Thanx a lot.

[@emiliomaalouf5101]

I wasn't getting the error before when I was switching really fast between pages and also, when I was using the console.log thing to display a message it was doing it whenever I switch. Now that I'm using this it keeps giving me fetch aborted whenever I load the home page and after i get the data. Anybody knows why ?

[@lomeinmaster]

I'm having the same issue. Did you find a solution?

[@lrajoo11]

thanks for adding this - just got this error :)

[@BackyardniJuan]

im not getting that can't perform error in class component "react": "^18.2.0",

[@mj2758]

SAME

[@rehanayoub4574]

Please also create a tutorial for testing for both react and nodejs and how to mock db calls and api. I want to learn integration testing and unit testing using any javascript testing framework

[@Abogida11]

When I switch from one link to another I don't have that error message in my console...as Net Nonja has it.what's going on?

[@_swordancer_]

Shaun I have just found Your video on Brad Traversy channel, I have looked through it and it is next on my list after this react tutorial :)

[@saketaryan2227]

Awesome videos...love from INDIA

[@akshaypendyala]

Hey Shaun i got this warning when I used abort. src\useFetch.js Line 37:6: React Hook useEffect has a missing dependency: 'abortCont'. Either include it or remove the dependency array react-hooks/exhaustive-deps can you explain what this is.

[@Tschüss101]

I need HEEEEELP... I can't get the error😂 I want to GET it. Isn't that weird??

[@SAIEN333]

same with me, maybe this is fixed in new updates?

[@ercanyanmaz5624]

Excellent Teaching, Thank You.

[@ArlyJuDe1st]

Can someone help me, I always get an error it say "error 'AbortController' is not defined no-undef"

[@wolfie1001]

for those that get this and cant find the answer, as someone said below, it needs to be, new window.AbortController(); rather than just, new AbortController();

[@azyjmexcuseokstop924]

I'm using router version 7 and I did not get any errors when quickly switching back and forth from home to create. Do you think they implemented a feature so that people dont need to clean up their code with router version 7 ?

[@samirprasla1770]

i am wating on next video !! one again thank you for your hard work !!

[@pawcio17135]

This guy is so damn good, i love u mate u're helping me and my friends a lot. Best React tutorial i've ever seen (it's m y first xDD)

[@GAGANDEEPSINGH-jx4ky]

@thenetninja how do you know that is the point where we ve to write console.log("cleanup") and it ll show when we switch to New Blog ?? Please explain

[@sarvarkhalimov111]

Thank you, man. Great tutorial!

[@MrVipulLal]

Useful series. Thanks

[@AndresVargas-nv8vh]

For this chapter after 02/2022 if you have still the issue update: err.name === 'Abort Error' to err.name === 'AbortError'. Example: (you can test it with the console.log) .catch(err => { // console.log(err.name); if (err.name === 'AbortError') { console.log('fetch aborted'); } else { setIsPending(false); setData(null); setError(err.message); } } Note: the setData(null); inside the .catch() is because that removes the All Blogs! information when we receive an error.

[@itgiants5218]

Woow I have learned a lot of things, thank you so much

[@jess140]

Great tutorial, you explained things so well!

[@work9909]

May I know the logic behind why the clean up function is in the return statement? Why it wouldn't clean up everytime when we useEffect? or actually I does abort everytime just we are not catching that, in that case will that err carry onto the next useEffect?

[@dylanroberts6217]

If you're still getting the error, make sure to remove the setTimeout.

[@bskull3232]

No offense, but I don't know if you are being sarcastic or serious. The idea he added the timeout is to simulate a real world Internet scenario. Without the delay sure you will get around without any cleanups, but when you deploy it, it will go wrong.

[@nicholassmith6412]

Excellent video. Very helpful, thank you

[@ThirisulaVarahi]

All right then

[@oussamaamireche1184]

Thank you so much for this amazing playlist 🤩. i just wanna ask a question which is why I'm not getting that error like you do? is it because I am using a new version of react?

[@b2elias]

Awesome information my friend, thank you!

[@erkanisuf3604]

This shit right here is GODLIKE , thanks man !

[@chethananderson3446]

Loved it🔥

[@abbisalmi1948]

Wicked lesson! thank you!

[@EJ-jh1vf]

*gets slag pregnant* Slag: what should we do? Me: 3:53

[@ms77grz]

Now I know how 🙂 Thanks Master!

[@rakeshchauhan-op8qw]

2:56 - most famous english words.

[@nasrinsolati3175]

What if we do not get the warning, do we still need to write the abort code?

[@sunilanthony17]

I have a bit of a problem, everything works but I'm still reaching the abort error message when I load the Blogs.

[@kazuoy]

Thank you very much to show me such a great contents!!

[@bskull3232]

Thanks for your video. Have been learning MERN for a while and stumbled on your video, and I must say I love the style. I'm an old dog learning new tricks -- have been coding in VB since the early 2000s, and since early 2010s doing embedded works. Keep up with the good works! However I do have a doubt -- this fetch abort mechanism might have a problem in extreme cases. If the page change happens between the fetch has completed, while the JSON parser is doing its job, there will not be anything to catch this case, and we will still have the error. Granted, this is a very low chance event as the JSON parser on a modern computer takes microseconds to return, but still with large enough data and many enough users, this can happen. I think a better way is to add a lock variable on the return function, which gates all state updates.

[@Chris-yx4gn]

Curious here, how would you gate the state updates?

[@lskills213]

I just wish that I know about the net ninja tutorial at my graduation time...

[@heytheremogwai]

do you have to associate abortController with a specific action? can you just have one in the useEffect itself, declared and then return () => abortController.abort()?

[@paularosler949]

Hi! Thank you so much for this tutorial, it is really great!

[@thejesudayan7786]

Hi Ninja, I followed the same code but my page is not fetching the data from json and is neither responding to page change via url or click. /create is doing nothing

[@thejesudayan7786]

please help

[@rajchinagundi7498]

I got stuck here ,theres a lot going on and i havent had any problems with this tutorial till yet, but am i the only one who feels like this

[@PaardekooperJoris]

If you're here not getting the error mesage: check your navbar file. I apparently missed the code for vid23 and didn't get the error.

[@unknownman1]

thanks

[@zlackbiro]

Why abort, look this: 😎 const mounted = useRef(true) useEffect(()=>{ fetch(url, options) .then(res => res.json()) .then(data => { mounted.current && setState(data) }) return () => mounted.current = false },[]}

[@trantrungnghia9642]

I LOVE YOU , MY ONLY GOD

[@vanshika3971]

where should we place this {signal : abortCont.signal} thing if we are using lazy loading import method instead of fetch, I tried to place it inside setstate and it worked, is this the right way to do it or we should do it in a different way. I did it like const importlang= async (code) => { const lang= await import( `../../languages/${code}/test.json` ); setState(lang, { signal: abortCont.signal }); };

[@PatrickPereiraVieira04]

Hi there, I've finished the whole project to the end but I seem to still have an issue with this step. Even when I have the same code I still get something strange. From console.log(err.message), the console says "Failed to execute 'fetch' on 'Window': The user aborted a request." but that's just from refreshing the page.

[@jsanchez5199]

Had the same experience, I just started learning react yesterday, what I did was remove strict mode from the render, and this error was gone, I'm guessing it has something to do with the app rendering twice on strict mode, but I really don't know why.