Removing all componentWillMount from my project, what is the replacement if my child components depend on an api response

Hopefully not an xy issue, react deprecated some lifecycle methods, we were using component will mount to make api calls in one of our parent components as the children content depends on what is returned from this api call.

At the time we couldn’t use componentDidMount for the calls since child component lifecycle methods trigger before the parent’s componentDidMount.

Answer

Putting the API call into componentDidMount will work if you use conditional rendering to only render the child component(s) once the API response comes back and updates state. Something like:

render() {
  return (
    <div>
      parent component stuff
      { this.state.apiResults ? <Child apiResults={this.state.apiResults} /> : null }
    </div>
  );
}

where the fetch result updates apiResults in state.