Component Renders too early

Question

I have a class that does a lot of API Calls to populate the state so I'm doing it in the componentDidMount() lifecycle hook like this:

 async componentDidMount() {
    await this.populateQuote();
    await this.populateCustomers();
    await this.populateEmployees();
    await this.populatePropertyTypes();
}

and each of this functions are getting some data and setting some values in the state, now my problem is that every time one of the promises resolves it re-renders the page which I'd like to avoid, is there any way around this?

Answer 1

You should use Promise.all to ensure that all Promises in an array gets resolved before perform an operation

async componentDidMount(){
    const calls = [call1(), call2(), call3()]
    const results = await Promise.all(calls)
    console.log(results[0],results[1],results[2])
}

Answer 2

Use Promise.all() to fetch all data and then this.setState() to perform the only re-render

async componentDidMount() {
  const [quote, customers, employees, propertyTypes] = await Promise.all([
    this.populateQuote(),
    this.populateCustomers(),
    this.populateEmployees(),
    this.populatePropertyTypes()
  ]);

  this.setState({
    quote, 
    customers, 
    employees, 
    propertyTypes
  });
}