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

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.

CodePudding user response：

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>
  );
};

CodePudding user response：

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.