Implementing Facebook comments plugin in ReactJS app

Question

I\'m trying to load the facebook comments plugin in a ReactJS app that\'s currently using React Router.

If I put the facebook init code inside my page\'s componentDidMou

Answer 1

You only need to initialize the JavaScript SDK once, and since componentDidMount only gets called once it´s fine where it is. Try putting FB.XFBML.parse() in componentDidUpdate:

componentDidUpdate() {
    FB.XFBML.parse();
}

I am not sure if this is the best solution, but it should work.

Answer 2

You can place FB.XFBML.parse() in componentDidUpdate() but it works only when component updates as componentDidUpdate() is a update life cycle method. This solution won't work if you navigate to some other component and then come back to it. Because in this case, componentDidMount() called again but not componentDidUpdate. So, its better to place FB.XFBML.parse() in top of componentDidMount().

componentDidMount() {
  if(window.FB){
    FB.XFBML.parse();
  }
// all other code is same
}