Facebook JS SDK and React

JavaScript
1

Below are the code fragments i’m using.

index.html

<body>
  <script>
  
	window.fbAsyncInit = function () {
      FB.init({
        appId           : 'xxxxxxxxxx',
        xfbml           : true,
        version         : 'v9.0'
      });
	  
	  //some code here to fire an event that notifies FB object has initialized
      var fbInitEvent = new Event('FBObjectReady');
      document.dispatchEvent(fbInitEvent);	  
	}
  
	(function (d) {
			console.log('IIFE fired about to load fb.sdk...')
			let js, fjs = d.getElementsByTagName('script')[0];
			if (d.getElementById('facebook-jssdk')) { return; }
			js = d.createElement('script'); 
			js.id = 'facebook-jssdk'
			js.src = "https://connect.facebook.net/en_US/sdk.js";
			fjs.parentNode.insertBefore(js, fjs);
	}(document));
</script>

  <div id="root"></div>
</body>

//then somewhere in a React component

 componentDidMount() {

    //wire-up a callback FN,  where we can use the FB object
    document.addEventListener('FBObjectReady', this.DoStuff_Callback());
 }

Q1.
How can I ensure that when the event is broadcast right after FB.init() - see .dispatchEvent() above, the listener for this has already been set up?
i.e. componentDidMount should occur first, and then FB.init() is called within index.html

Q2.
My findings are that whenever I change jsx pages, a hard-refresh is required to force index.html to reload; Even though the cra-dev-server does indeed restart, and the various Components unmount/(re)mount, etc, yet the index.html does NOT refresh by itself, hence it appears the FB.init() is not being called in my localhost / dev environment,

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.