2

I have always made API's request in ComponentDidMount lifecycle and called setState in the callback. But while digging deep I happened to find out We should not call setState in this lifecycle as it triggers render method again and React also doesn't recommend that.

Then in that case where exactly we should make that request and call setState to use result after that?

indar
  • 90
  • 1
  • 10
  • 2
    componentDidMount is correct. – Nicholas Tower Mar 05 '19 at 06:52
  • you are incorrect about not making api calls in componentDidMount. It is the right method to make API calls – Shubham Khatri Mar 05 '19 at 06:53
  • Possible Duplicate of https://stackoverflow.com/questions/47392910/use-componentwillmount-or-componentdidmount-lifecycle-functions-for-async-reques/47393005#47393005 – Shubham Khatri Mar 05 '19 at 06:53
  • Even though you make API calls in constructor or componentWillMount which are called before constructor there is no gurantee that the response is received before render and a re-render is anyways triggered on setState – Shubham Khatri Mar 05 '19 at 06:58
  • You may call setState() immediately in componentDidMount(). It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. In most cases, you should be able to assign the initial state in the constructor() instead. - React doc – indar Mar 05 '19 at 07:00
  • @indar What it talks about is the setState without an async call in componentDidMount – Shubham Khatri Mar 05 '19 at 07:04
  • @Adnanshah you are wrong, since componentWillMount is being deprecated – Shubham Khatri Mar 05 '19 at 07:04

2 Answers2

3

You should absolutely make an API call in componentDidMount. What is not recommended is to re-render a big component, instead what you should do is break your UI into small logical components and only re-render only what is needed , not a whole. For example, you have a big component named HomeComponent which has 3 small components called NavComponent, BodyComponent and FooterComponent. You should NOT be calling the API from the componentDidMount of the HomeComponent since calling setState from HomeComponent will re-render all the small components inside HomeComponent, which is not necessary since you know that the navbar or footer is not needed to be re-rendered. Rather from the BodyComponent, because only the body part needs to be re-rendered since its state has changed. So you should be calling the API from the componentDidMount of the BodyComponent, that way you re-render only whats needed.

Shababb Karim
  • 3,614
  • 1
  • 22
  • 35
  • Thanks for the explanation. I do take this approach of splitting UI into small components so child components don't get rendered unnecessarily. But I thought there would be any different approach community is using. :) – indar Mar 05 '19 at 07:52
0

@Shababb Karim is right but if i were to implement API calls in my project i would add a state management library. Redux is a great way to implement a global state to the app where you can set data from said API. All components that need that data can be attached to the Redux state to get it.

Redux can be a bit of overhead in smaller projects though. In this case there are other options like Flux (although i like Redux more).

Michael Koelewijn
  • 436
  • 6
  • 15