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?