We learning boys

@rrthurein4990

Жыл бұрын

Gang gang

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!!

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

This is just what I needed. Thank you.

Firstly, I hit like and then start to watch

@WebDevCody

Жыл бұрын

Yeah buddyy

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 😁.

💡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.

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

Another great video.

I like these short informative videos

really helpfull. thanks!!

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

Where can I find you classroom app

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

Good job babe!!!!!

@WebDevCody

Жыл бұрын

Thank my love!

Great! (video)

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.

@jacktrusler6506

Жыл бұрын

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.

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

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

@WebDevCody

Жыл бұрын

I’m learning too 😂

@vnm_8945

Жыл бұрын

@@WebDevCody even better 😂

AbortController is more reliable cause it prevents unnecessary fetching