React document.addEventListener fire immediately-CodePudding

I have search about this problem.

It must be pass function reference.

document.addEventListener("click", () => {}, false)

But what I do is still fire immediately.

Do I make some wrong?

Test code is below

export default function App() {
  const start = () => {
    console.log("start");
  };
  const click1 = () => {
    document.addEventListener("click", start);
  };

  const click2 = () => {
    const element = document.getElementById("p");
    element.addEventListener("click", start);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <button onClick={click1}>Click1</button>
      <hr />

      <p id="p">123</p>
      <button onClick={click2}>Click2</button>
    </div>
  );
}

// Click1 -  immediately, problem here

// Click2 - no immediately

FYI, you should also remove the DOM listener when your component unmounts

useEffect(() => () => document.removeEventListener("click", start), []);

CodePudding user response：

Another option you might consider, keeping in mind the React paradigm to only attach listeners using React when possible, would be to attach the click handler to your App, rather than to the document with .addEventListener. (Best to only use addEventListener when there's no alternative with React handlers.)

function App() {
  const [started, setStarted] = React.useState(false);
  const tryLog = () => {
    if (started) {
      log();
    }
  };
  const log = () => console.log("event");
  return (
    <div className="App" onClick={tryLog}>
      <h1>Hello CodeSandbox</h1>

      <button onClick={() => setStarted(true)}>Click1</button>
      <hr />

      <p id="p">123</p>
      <button onClick={log}>Click2</button>
    </div>
  );
}

ReactDOM.createRoot(document.querySelector('.react')).render(<App />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>