componentWillMount vs componentDidMount when calling API

Question

I just added Facebook Login(Javascript SDK) to my React App. The thing is when I added the Facebook API in componentDidMount, the webpage became very slow to load. So I tried a different method which is componentWillMount even though there was a deprecation warning. But it looked like changing the API call to componentWillMount dramatically improved the speed of loading.

Do you think there is a difference between componentWillMount and componentDidMount when it comes to website performance? And is it okay to use componentWillMount method? Or do you highly recommend componentDidMount?

class FacebookAuth extends Component {
  UNSAFE_componentWillMount() {
    window.fbAsyncInit = () => {
      window.FB.init({
        appId: "ID",
        cookie: true, 
        xfbml: true, 
        version: "v4.0" 
      });
}}

Check this - https://hackernoon.com/where-to-integrate-api-calls-in-reactjs-componentwillmount-vs-componentdidmount-710085dc05c3. and this - https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/ — ravibagul91, Aug 29 '19 at 10:14
Possible duplicate of [what is right way to do API call in react js?](https://stackoverflow.com/questions/38742334/what-is-right-way-to-do-api-call-in-react-js) — ravibagul91, Aug 29 '19 at 10:15
In starting complete component is loading and at the same time facbook api also loading parallelly so it will little slow while componentDidMount is executing after loading initial component completely so it looks little faster. — Mukesh Burnwal Mike, Aug 29 '19 at 11:20

score 0 · Answer 1 · answered Aug 29 '19 at 10:54

0

You should not use componentWillMount, it will be completely removed with React v17.

There should be no noticeable performance difference in your use case. It must be another issue. Your API calls should all be in componentDidMount.

answered Aug 29 '19 at 10:54

TemporaryName

487
5
16

score 0 · Answer 2 · answered Aug 29 '19 at 11:57

With the new updates of React, componentWillMount may invoke several times when a component is being loaded, hence unpredictable behaviour will be exhibited. That is why it is not advised to use componentWillMount. If you still think putting your code inside componentWillMount will slow down page loading, try moving it to componentDidUpdate as follows.

componentDidUpdate(prevProps){
  if(prevProps !== this.props){
      //your code here
  }
}

componentWillMount vs componentDidMount when calling API

2 Answers2