React setState within Promise.all

Question

I'm working on a project where we would like run multiple fetches in parallel to a very slow API. Ideally, we would like to populate our interface for the user as this data is received and do so in a summative manner. These requests may or may not resolve in the order that the API calls were made.

Most use cases of Promise.all with a setState involve setting state after all promises have resolved. However, what I'm looking to do demands setting state as a side effect within the child promises themselves, I believe.

So this is (simplified) what I am doing to achieve this:

  const request = async (setState, endpoint) => {
    const response = await fetch(endpoint);
    const data = response.json();
    setState(state => ({ ...state, ...data }))
  }

  // Called within React component as a side effect
  const fetchAllData = (setState) => {
    Promise.all(
      [
        request(setState, url_1),
        request(setState, url_2),
        request(setState, url_3)
      ]
    )
  }

Now, I'm running some testing and this does appear to work. I believe I should not be running into race conditions with the state because setState is being passed a function. However, I do wonder if I'm doing something dangerous with respect to React, updating state, and rendering.

Is there anything wrong with this picture?

user_1048572 · Answer

There's nothing wrong with immediately updating state from each individual promise; this will work just fine. You might have a race condition if every request attempts to update the same bit of data, but as long as they write different parts of your state you should be fine (the state updater callback pattern is necessary though).

The only thing wrong with your code is the missing error handling, and that the Promise.all is currently a bit superfluous.

React setState within Promise.all

1 Answers