Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

componentWillMount vs componentDidMount when calling API

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" 
      });
}}
Tags:

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 0

    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
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search