Mastering useEffect: Avoid Race Conditions

Показать описание

Let's keep digging into useEffect to figure out how to avoid race conditions when asynchronous requests return out of sequence. The provided code can solve race condition issues in React 18, Create React App, NextJS 13, Remix and more!

#shorts

Рекомендации по теме

Комментарии

It is better to cancel the previous request when the url changes, instead of not setting the data when it arrives.

grugbrain

Thanks fo sharing this! But we can do the same with abort controller and signal, its more verbose but when we talk about promises I think it's better.

fagundezantony

With these shorts i am learning so much, thank you very much for creating this informative shorts 😊😊

rahulkhandelwal

I think this could be better explained in a full video. thanks tho for the heads-up

anasouardini

Can also pass abort signal flag in fetch api like this.
React.useEffect(() => {
const controller = new AbortController()
getDog(dogId, {signal: controller.signal}).then(
(d) => setDog(d),
(error) => {
// handle the error
},
)
return () => controller.abort()
}, [dogId])

testwork

You can also do an useMount like hook to do effectively the same and make your useEffects cleaner :)
A suggestion would be to have a useEffectWhile hook that wraps useEffects and does the same thing but without the need for the mounting and unmounting, it all is already done in the useEffectWhile hook, very DRY :)

hugodsa

what i do to prevent multiple request and multiple manipulation of data at a time is having a timeout or like a "debounce" like useEffect

useEffect(()=>{
let timeout = setTimeout(()=>{

setData(res.data)
})
}, 500)
return ()=>{
clearTimeout(timeout)
}
}, [url, keyword])

joelbaluma

Wish I found your channel before I started learning react a year ago 😢

MasayaShida

Thank you for your informative videos!

mikel

Great stuff, didn't know that one. Thanks!

williamabboud

I did something like this,
instead I used date.now as a flag and passed it in the req payload and before setting the state i checked if req had the same unique value,
It was dumb way but it worked and I didn't have to think about writing another line in clean-up function

morningtarr

These are very useful nuggets of info. It's hard to understand frameworks without knowing when and when not to use such opinionated implementations.

kawaiiLorenz

IsCurrent is better to be called as cancelled. Usually you can cancel request quiet easily with axios..etc.

sabiw

But. Isn't isCurrent scoped within the execution of the useEffect function, or is that because it is an arrow function the isCurrent is scoped within the functional component execution?
I.E. Does let scope isCurrent in the external scope because an arrow function is used?

fredbluntstoned