Why you should clean up react effects using fetch

[@ΧαρηςΧανοζιδης]

We learning boys

[@rrthurein4990]

Gang gang

[@szabolcsjobbagy30]

It's very nice that besides showing the code (even 2 or more alternative solutions of the same problem) you tell us the reasons as well, the concept behind it, why are these good/bad practices, we can learn a lot from you, Thank You!!

[@blovio]

Man I could've used this video like 2 months ago, trying to find good info on this was annoying... great simple explanation.

[@nemanjavucic6653]

Firstly, I hit like and then start to watch

[@WebDevCody]

Yeah buddyy

[@JasonLayton]

This is just what I needed. Thank you.

[@lukor-tech]

This is something I needed and I didn't know I did.

[@dcknature]

Thanks for showing us the proper way to handle this kind of situations 👍! Some apps are infamous for doing it the lazy way, plus confusing their users with ambiguous messages like: "No connection!", when the user's connection is absolutely fine 😁.

[@amershboul9107]

💡you can do it like that useEffect(() => { let mounted = true ( async () => { const response = await fetchData(); if ( response.data && mounted ) { setData(response.data) } })() return () => { mounted = false } },[])

[@MrRe-sj2iv]

I think aborting a Promise is more optimize than go around it by using mounted check.

[@SahraClayton]

Another great video.

[@adarsh-chakraborty]

I like these short informative videos

[@tahielgomez]

really helpfull. thanks!!

[@StiflerNR]

Would something like this work with React + Redux + Redux-Saga + Service layer (built on open-api generator) ? In useEffect im dispatching action which go to saga => saga calls a service => service returns data and set them to ReduxStore Something like i generate AxiosCancelationToken in UseEffect --> send it to saga -> map it to service.method({ options: { cancelationToken: tokenFromUseEffect }}) and then in cleanUp function in useffect i trigger cancelationToken (Axiox.CancelToken.source().cancel()) Is this correct way ?

[@WebDevCody]

I think so, I’d probably send the signal from the component inside the dispatch payload maybe so that when you unmount you can abort the signal

[@aishanstha]

useEffect is called after each render and when setState is used inside of it, it will cause the component to re-render which will call useEffect and so on and so on.

[@blovio]

Not if you set the dependency array (second argument of useEffect)

[@rohanshahi8741]

If you pass empty dependency array then it only runs on mount. And mounting and re-render is different thing.

[@akilakavisinghe7189]

This actually doesn't currently work if you are using Next.js server actions to fetch API requests. Once a request is sent to the server the client can no longer abort it for some reason.

[@niklassoderberg2168]

Great! (video)

[@Harish-rz4gv]

Where can I find you classroom app

[@raphaelgorbach1476]

Hi reletivaly new to react, how do I do this when I call a function in useEffect that does the fetching for me? Don't I then have to pass the signal as an argument so I have an object reference to that abort controller? Also woudn't this be consider bad practice since the called function would then be impure?

[@WebDevCody]

If you’ve abstracted your api call out into a separate function then maybe have that function return a cancel method and the promise, that would allow your component to cancel your request at anytime and not be coupled to the api request details

[@SeibertSwirl]

Good job babe!!!!!

[@WebDevCody]

Thank my love!

[@_Sonato]

I really think you should get into the habit of using guard clauses instead of these single line if/else statements.

[@vnm_8945]

very nice, keep up with the good work, we' learnin' here. :D

[@WebDevCody]

I’m learning too 😂

[@vnm_8945]

@@WebDevCody even better 😂

[@orlvni]

AbortController is more reliable cause it prevents unnecessary fetching