Hi, I am a lazy frontend developer come from Vietnam, the man looking for original values.
There are so many problems that developers should not manually resolve nowadays. I will list of in another article. One of them is race condition.
Not only in ReactJS, race condition is a term used for an undesired situation when a single "resource" has been access at the same time from many "sources". "Sources" can be HTTP request, user, whatever, and the same for "resource". Let's think it easy as a sender and receiver.
Scenario
In JavaScript world, you need to face lots of problems caused by only one thing: asynchronous. The race condition is just one of them. In fact, we need to send lots of asynchronous API requests and know neither how long does each take nor the order of results.
Let say we have to call two request to get active product and update the result to the state with a condition: we do not need and also do not want to wait the second request has been made after the first has completed. You probably know this is not a rare case nowadays. We want, as soon as one of each result received, we take it and store into the state.
Please note that async/await or React-hook themselves do not resolve this problem. They are just a syntax to write your code, not the solution. You can read more from Dan Abramov article.
The solutions
There are three different solution levels for this scenario, from the basic to advance:
- Writing by your hand
- Use a middleware like Redux-saga.
- Use GraphQL and Apollo
Writing by your hand
I highly recommend NOT using this way. The idea is simple: we need to cancel the first request. A great article you should take a look at this medium article. Do not need to duplicate his words.
Use a middleware like Redux-saga
Redux-saga is a popular library in React world in the past several years. It does not only resolve the race condition problem, it also helps you manage the asynchronous calls better.
I think do not need to talk more about Redux-saga now, almost React developers has great experience with it. But for me in 2020, using Redux and Redux-saga is a good signal to show that your code base will become messy. Redux is painful, it is not only my thought.
"Don’t use Redux if it’s painful (React doesn’t force you to). Not sure I understand how this relates to WCs".
-- Dan Abramov
https://twitter.com/dan_abramov/status/959225731019694080
Use GraphQL and Apollo
I have surprised recently when somebody asks me how to resolve race condition issue. Some seconds later, I realized that I do not need to resolve it for very long time (with Apollo Client helps). Long enough to forget I need to care about that problem.
This approach based on the core GraphQL. Like I said many times before, GraphQL is a revolution. But not like two previous approaches, you do not need to change whole infrastructure to resolve race condition problem. So in fact, you may need to consider when applying GraphQL into current existing code base because it changes everything.
Back to our main problem, from the beginning of using Apollo-client, it helps me reduce tons of time for considering many problems like state management, middleware, race condition and so on. A great article on medium has clearly explained everything you need.
Conclusion
It is 2020 now. There lots of things you need to learn in your developer journey. However, manually implementing the solution for problems like race condition is not a good thought. See you in the next article where I can list out all things a developer should do, and should not, too.
Thanks for your valuable reading time!
Top comments (0)