reactjs - Why is window.opener.function printing out twice in React page?

Question

I have a react functional component which returns a button to a page. This button when clicked, calls a function which opens a new window and sets a function inside the current window element.

export default function Authorizer_Spotify(props) {

  function someFunction() {
    let pop = window.open("http://localhost:3000/redirect", "", 'width=800,height=600');

    window.myCallback = () => {
      pop.close();
      console.log('hello');
    }
  }
  
   return (
    <div>
        <button variant="info" type="submit" onClick={someFunction}>
            click button
        </button>
    </div>
   );
}

This new window is a page set up by another functional component that calls the "myCallback()" function from the parent window by using:

export default function Redirect() {

    window.opener.myCallback();

    return (
      <div className="content">
        <p>Redirect Page</p>
      </div>
    );
}

So when I type in the developer tools console "window.myCallback()", I should get a "hello". And when I press this button, I should also get a "hello".

For some reason, whenever I press the button, "hello" gets printed twice in the console and then if I type window.myCallback() in the console, I get hello back but then it says undefined underneath it.

I'm not sure what about my code is making this run twice. The window.opener.myCallback() itself doesn't seem to be called twice but just the code inside of the function.

question from:https://stackoverflow.com/questions/65641379/why-is-window-opener-function-printing-out-twice-in-react-page

Answer 1

Waitting for answers