Be Cautious of React.useEffect Race Condition Bugs | JavaScript

It is pretty common for React's useEffect to introduce race condition bugs. In this video I will introduce a common race condition bug as well as demonstrate a couple solutions to fix this bug.

[ExtraTurtle]

I love this explanation. people always talk about these things without mentioning closures. this really helps to understand the solution.

[RenatoFontes]

Thanks!
I've been slowly learning react and it would have been awful to run into a race condition 😂

[santiagoaguilar]

Good video!!!
However you should have shown us the first solution working just to make sure is a valid an quick solution in case you don't want to import React Query.
However it looks pretty cool that library.
Thanks!

[marianogonzalez]

What about if I have various tables components, and each of them make a fetch? In my case, the fetch gives me data from backend and when I try to render in its respective table, data is not located in its respective table but in another? I dont want to cancel the fetch, I want to put the data into de correct table any time render the table component

[diegommf]

Thanks, again... Single question: could you apply useMemo hook instead of the library react-query?

[Yousudame]

I loved it, what do you think of SWR ?. Can you do the same with SWR ?. What are your preferences on SWR and react-query?.
Thanks 🇦🇷😎

[sarcasticdna]

Hey Joel,
What Software are you using to draw those lines and do zoom on the go

[elik]

Thank you for this example! I have a question, though. If the Race component is called twice with two different ids, wouldn't this create two different, seperate and independent components/react elemnets? if so, how come the useEffect call of the component A can have any impact on the useEffect call of the component B? Wouldn't it result in two seperate fetches firing off, and if so, they should return two seperate primise objects right away. If that's right, what would be the cause of this problem, result of the first fetch is set into the other object? Also, if these are two seperate Race React elements, wouldn't it mean that React is tracking two different person states for the two elements that would correspond to two diferent indecies in React state cash (probably, definition could be more pricise) so that the values of the two person states didn't get confused?

[ryanneil]

Hi Joel do you have a link to the codesandbox for this? Thanks!

[Tonestire]

3:54 So when the components renders for the second time, the unmount for the first call runs and then sets the first component's cancelled to true, which then prevents the first call's data from being rendered. Since each call has its own closure, does this mean that the cancelled variable from the first call will never touch the second call's useEffect?

Let's say we make a second call and are waiting for its data. Why is the first call's useEffect still running in the background to make sure it doesn't load the first call's data?