Wait for multiple async calls to finish before React render

Question

I have a component, which relies on data to be asynchronously retrieved before the content is rendered. If the data is not yet available, the render function will return a Loader component instead:

    if (this.state.loading) {
        return <Loader />;
    }

The state of loading is set to false after the call returns data:

componentDidMount() {

        ExternalComponent.fetchData().then(response => {
            this.setState({
                loading: false,
                data: response
            });
        });
}

This works ok, but what if I wanted to add in another async fetch call in parallel? How would I properly wait for both to finish before setting the state of 'loading' to false?

Some where in your react data store, you will need to set the loading flag to true. I am assuming that you are using flux or redux model. If you set the flag to true, then the data store will go through return the flag. I think if you want to call two async fetch calls, you would likely have to use promises which is the equivalent of multi-threading in java but it pulls data one at a time. — Demon
– Demon, Commented Sep 5, 2018 at 14:24
@devserkan Yes I am, would this ideally be handled through Redux? — Rolodecks
– Rolodecks, Commented Sep 5, 2018 at 14:30
Take a look at Promise.all! developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — bozdoz
– bozdoz, Commented Sep 5, 2018 at 14:32
Although you've found the solution I still have provided an answer for Redux side. In the future maybe you remember this :) — devserkan
– devserkan, Commented Sep 5, 2018 at 14:44

bozdoz · Accepted Answer · 2018-09-05 15:00:27Z

21

Using Promise.all:

componentDidMount() {
  const fetchData1 = ExternalComponent.fetchData()
  const fetchData2 = AnotherExternalComponent.fetchData()

  Promise.all([ fetchData1, fetchData2 ]).then((responses) => {
      this.setState({
          loading: false,
          data: responses[0]
      });
  });
}

edited Sep 5, 2018 at 15:00

answered Sep 5, 2018 at 14:35

bozdoz

12.9k8 gold badges74 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

devserkan · Accepted Answer · 2018-09-05 14:43:20Z

You have more than one option here I think but if you already use redux why don't you move your logic there? With the help of redux-thunk you can do your asynchronous operations in your action creators and use a global process state.

Related reducer:

const initialState = 0;

const progressReducer = (state = initialState, action) => {
  switch (action.type) {
    case types.INCREMENT_PROGRESS:
      return state + 1;
    case types.DECREMENT_PROGRESS:
      return Math.max(state - 1, 0);
    default:
      return state;
  }
};

Related actions:

export const incrementProgress = () => ({ type: types.INCREMENT_PROGRESS });
export const decrementProgress = () => ({ type: types.DECREMENT_PROGRESS });

Then your action creators would be something like this:

export const anAsyncFunction = () => async dispatch => {
  dispatch(incrementProgress());
  try {
    const someResponse = await someAsyncJob();
    dispatch(anAction(someResponse));
  } catch (error) {
    errorHandler(error);
  } finally {
    dispatch(decrementProgress());
  }
};

This is an example of async functions but you can use promises of course. When you want to make multiple async operations just fire your action creators and they increment the process by one. In your component, you will check if your progress state is greater than 0 or like if(progress) shortly than show a loading component.

Gary Vernon Grubb · Accepted Answer · 2018-09-05 16:57:48Z

0

To keep things simple you could have two or more loading flags as shown below:

if (this.state.loading1 || this.state.loading2) {
    return <Loader />;
}

answered Sep 5, 2018 at 16:57

Gary Vernon Grubb

11.5k1 gold badge30 silver badges29 bronze badges

Collectives™ on Stack Overflow

Wait for multiple async calls to finish before React render

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related