CODEWITHSUNDEEP
javascriptreactjsasynchronousasync-awaitaxios
user1955934
user1955934

Reputation: 3495

Javascript Asynchronous State Update

I'm trying to think the best practice for this use case:

I have an internal state: results[] that will be used for displaying data in render.

Then, I need to call 3 API's, in parallel, and then merge and sort them into results[] before finally rendering it.

I'm using axios to call the API's, but i don't want to use axios.all because i need to display the results[] as each of the 3 apis are returning, that way, it looks faster.

Im running into problem because everytime i update results[] with new data using this.setState(), the latter operation always see the old results[]; this.setState() doesn't immediately get applied..

What's the best way to do this?

Upvotes: 0

Views: 115

Answers (1)

deceze
deceze

Reputation: 522110

There will never be a race condition since Javascript runs on a single thread. It is guaranteed that only one asynchronous callback will run at any one time, since a single thread cannot execute both at once. The next asynchronous callback will be scheduled to run later. Within one function call, you can be assured that you are the only one working on some data.

Data may come in at different times, but if you simply merge and sort the data every time you receive new data, that will be atomic.

Upvotes: 1

Related Questions