score:1

Accepted answer

You can integrate componentDidUpdate() and use it to render your child-components in a somewhat synchronous flow.

Let's say the structure of your Parent Component should look something like the following:

Parent

class Parent extends React.Component{
   state = {
      renderChildren: false
   }

   async componentDidMount() {
      await this.props.getEventTypes();
   }

   componentDidUpdate(prevProps){
      if(this.props.yourUpdatedReducer !== prevProps.yourUpdatedReducer){
         this.setState({
            renderChildren: true
         })
      }
   }

   render(){ 
       const { renderChildren } = this.state 
       return(
         { renderChildren ? <Child/> : "Loading" }
       )
   }
}
  • You want a key in your state that determines whether you should render the Child component.
  • In componentDidMount(), you call the action-creator function, when it completes, you get updated props.
  • With updated props, you trigger componentDidUpdate(), where you check the values in your reducer. If the values are different that means you got the updated data from your database, so everything has loaded.
  • Great, so now you want to mount your Child component, so you update-state, setting renderChildren to true, thus re-rendering the Parent component. Now Child gets rendered and should behave as expected.

score:2

You can try like this

Set isDataLoaded when data is available.

Use ternary operator for conditional rendering.

In you render

return(
    <>
        ....
      { isDataLoaded ? <ChildComponent /> : null }

        ....other sutff
   </>
);

Use can also use the && operator

 return(
        <>
            ....
          { isDataLoaded && <ChildComponent /> }
    
            ....other sutff
       </>
    );

Related Query

More Query from same tag