Which lifecycle hook should I make requests and immediately setState?

Question

When my component mount I need to request it content from an API. In the docs:

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

and it follows:

Calling setState() in this method will trigger an extra rendering (...) Use this pattern with caution because it often causes performance issues.

What is the best practice to make a request to an API and, immediately, setState with the response?

Call the api in `componentDidMount()` and update the state when you receive the response in `componentWillReceiveProps()` — Vipul Singh, Jan 09 '18 at 14:50
I didn't get it. Where I store the response of the API? The component that make the request is the same that receive the response, so, if I'm not wrong, this hook is never called because my component never receive props — Renan R., Jan 09 '18 at 14:57
I can expand on my answer and give you a more exact solution if you can tell me what kind of API-call you are making. Are you fetching data? If so, what kind of data and how will you use it in your React app? — Chris, Jan 09 '18 at 15:01

score 4 · Accepted Answer · answered Jan 09 '18 at 14:54

The best way to call an API and update the state after you receive the response is in componentDidMount() or componentWillMount().

Which one might depend on what you want to do with your data from your API-call. If you need to access your components DOM then componentDidMount() must be used. That said, neither of these will save you from an additional re-render, unless your data doesn't need to be set to your state, in which case you can just save it to this.

The official documentation even states this, in this section:

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

ComponentWillMount will soon be deprecated , it is unsafe now. So use componentDidMount — AConsumer, Dec 18 '18 at 12:59

score 1 · Answer 2 · answered Jan 09 '18 at 15:14

Before Rendering to call api:

  componentWillMount(){
     fetch(api)
        .then((response)=>{
         this.setState({data:response.data});
   })

}

After Rendering to call api:

  componentDidMount(){
     fetch(api)
        .then((response)=>{
         this.setState({data:response.data});
   })}

Before Rendering to call props data:

  componentWillReceiveProps(){         
         this.setState({data:this.props.data});

}

score 0 · Answer 3 · answered Jan 09 '18 at 14:54

Whenever you trigger setState your component is going to be re-rendered (regardless the lifecycle event).

Use this pattern with caution...

You can get to an endless loop for example if you trigger setState in componentWillReceiveProps and you are not taking care of future props correctly.

My suggestion is to stick with componentDidMount and set state as soon as your api request is fulfilled:

componentDidMount() {
  fetch('api-endpoint')
    .then(response => response.json())
    .then(result => this.setState({ stateProp: result }))
}

Which lifecycle hook should I make requests and immediately setState?

3 Answers3