title: Facebook chat component not loading unless a hard refresh on the page React
body: <p>i am having a problem with a facebook chat component, i am initing it within componentDidMount and it will load the component if you do a hard refresh on /contact but wont render the chat component if we browse to /home or /about and then back to the contact page.</p>
  
  <p>code for component : </p>
  
  <pre><code>componentDidMount() {
    window.fbAsyncInit = function() {
      FB.init({
        appId            : 'my-app-id',
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v2.11'
      });
    };
  
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  }
  
  render() {
    return (
      &lt;div
      className='fb-page'
      data-href='https://www.facebook.com/mypage/'
      data-tabs='messages'
      data-width='450'
      data-height='280'
      data-small-header='true'&gt;
        &lt;div className='fb-xfbml-parse-ignore'&gt;
          &lt;blockquote /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and here if what i mean, if you hard refresh the page you get what i want with this: <a href="https://ibb.co/gECpXm" rel="nofollow noreferrer">https://ibb.co/gECpXm</a>.</p>
  
  <p>but if i browse to /home and then back i get this: <a href="https://ibb.co/bLDwCm" rel="nofollow noreferrer">https://ibb.co/bLDwCm</a></p>
  
  <p>I am using React 16 and React router 4 for the routing.</p>
  
  <p>Thanks in Advance</p>