why onload function is being called twice, though component is rendering once?

Question

I am having a simple react component, the fire is printed once, but injectWindowInterval is called twice event though i am setting flag value, why is it so?

const Header = () => {
  let flag = true;
  
  console.log("fire");  

  function injectWindowInterval() {
    if (flag && window.google) {
      flag = false;
      console.log(window.google);
    }
  }

  const script = document.createElement("script");
  script.src = "https://accounts.google.com/gsi/client";
  script.onload = injectWindowInterval;
  script.async = true;
  document.querySelector("body")?.appendChild(script);

  return (
    <div className="header">
      <h3 className="header__title">RE</h3>
    </div>
  );
};

Update: for some reason, the script is appending twice in body.

If you are cheking the console while developing then it could be possible that you are running code in `React.StrictMode` mode. Navigate to `index.js` and see that whether you have wrapper `App` component in `React.StrictMode` or not. — DecPK, Jul 02 '22 at 16:45
@decpk yes, using React.StrictMode, but function is rendering once only i.e "fire" is printed once. — razik, Jul 02 '22 at 17:51

score 1 · Answer 1 · answered Jul 02 '22 at 16:51

1

In some cases function are called on render when they are defined. One common example is with onClick methods for buttons

<button onClick={onClickFunction}>Click me</button> //fires on render
<button onClick={()=>onClickFunction()}>Click me</button> //no fire on render, works well

So maybe try

const Header = () => {
  let flag = true;
  
  console.log("fire");  


  const script = document.createElement("script");
  script.src = "https://accounts.google.com/gsi/client";
  script.onload = () => {
    if (flag && window.google) {
      flag = false;
      console.log(window.google);
    }
  };
  script.async = true;
  document.querySelector("body")?.appendChild(script);

  return (
    <div className="header">
      <h3 className="header__title">RE</h3>
    </div>
  );
};

answered Jul 02 '22 at 16:51

JeanJacquesGourdin

1,496
5
25

Same issue tried above. The script tag is appending twice for some reason, i think that's why it is being called twice. – razik Jul 02 '22 at 17:50
Ah ok, i don't know how to write this but maybe try to .appendChild(script) conditionally, if body contains script with let's say scr="accounts.google..." then do not appendChild ? – JeanJacquesGourdin Jul 02 '22 at 18:15
have made a workaround for now using other flow, but still this seems weird behaviour in react. – razik Jul 02 '22 at 18:45

score 0 · Answer 2 · answered Jul 02 '22 at 18:55

If you are rendering the Component in <React.StrictMode>, the component will render twice for sure in development mode. I tried rendering above component(Header) and the fire is logged in the console twice so do the script tag appended twice. Here is the console Output

Note : Also note that React renders component twice only in development mode. Once you build the app the component will be rendered only once.

why onload function is being called twice, though component is rendering once?

2 Answers2