Btukfyl

I have a React app that uses multiple fetch calls throughout different components. In Home page component, I have imported smaller components, all of whom have it's own fetch call.

render() {

   return (

      <React.Fragment>

        <Banner/>

        <Services />

        <About />

      </React.Fragment>

    )

}

Banner, Services and About have their own fetch calls to different endpoints, now my question is because the response is a little bit on the slower side, how to wait for all of the child components to fetch data, then render the Homepage component. I have tried to put the state of isLoading and add a loader to wait for components to fetch, but I don't know what to wait for to set isLoading to false.

...how to wait for all of the child components to fetch data, then render the Homepage component

You don't. Instead, you move the fetches to the Homepage component's parent, and then have that parent only render the Homepage component when it has all of the necessary information to do so. In React parlance, this is "lifting state up" (e.g., up the hierarchy to the parent).

While you could render the Homepage in a "loading" form, and have it render its child components in a "loading" form, and have the child components call back to the Home page to say they have their information now, that's more complicated than simply lifting the state up to the highest component that actually needs it (so it knows it can render the Homepage).

As @TJCrowder mentioned in his answer, You'll need to lift your state up and keep it in the parent component. Make a network request there and pass the data to your child component as props. You can read more about lifting-state-up here

class YourComponent extends React.Component {

  state = {isLoading: true, isError: false, banner: null, services: null, about: null};



  async componentDidMount() {

     try {

        const [banner, services, about] = await Promise.all([

           // all calls

        ]);

        this.setState({ isLoading: false, banner, services, about });

     } catch (error) {

        this.setState({ isError: true, isLoading: false });

     }



  }



  render() {

     if (this.state.isLoading) {

        return <div>Loading...</div>

     }



     return (

        <React.Fragment>

           <Banner data={this.state.banner} />

           <Services data={this.state.services} />

           <About data={this.state.about} />

         </React.Fragment>

       )

   }

}

using promises in fetch you could, as suggested, have a isLoaded property state determine whether or not a component should render or not.

class ShouldRender extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      data: ,

      isLoaded: false,

    }

  }



  componentDidMount() {

    fetch('http://someresource.com/api/resource')

      .then(res => res.json())

      .then(data => {

        this.state({

          data,

          isLoaded: true,

        });

      })

  }



  render() {

    const { isLoaded } = this.state;

    if (isLoaded) {

      return <MyAwesomeReactComponent />

    }

    return null;

  }

}

So once the state is updated it will trigger a rerendering of the component with the new state that will render the if statement true and you're JSX will appear.