<p dir="auto">React version: 17.2</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Using a class component, if a click event changes some state, which renders a new component, and the new component adds an event listener on its <code class="notranslate">componentDidMount</code> checking for clicks, the new component will trigger that event</li>
</ol>
<p dir="auto">Link to code example: <a href="https://codepen.io/tholman/pen/87c661f0c893a2f8727db927c48d6d12" rel="nofollow">https://codepen.io/tholman/pen/87c661f0c893a2f8727db927c48d6d12</a></p>
<p dir="auto">(this does not happen if the created component uses hooks to add its event listener)</p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">A state change via a click that causes a new component to be rendered, that new component can pick up the original click event that created it, which seems like its reaching back in time, to so speak.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">Perhaps this is now intended behavior with the react 17 event changes (although it doesn't happen if I add the event listener with a hook on a functional component, but I would expect that if a click event causes a render, and the listener is added on the <code class="notranslate">componentDidMount</code> function, I would assume the "click" is complete, and wouldn't be detected.</p>
<p dir="auto">React version:</p>
<ul dir="auto">
<li>Works in React v17.1.0</li>
<li>Doesn't work in React v18.0.0 &amp; v18.1.0</li>
</ul>
<h2 dir="auto">Steps To Reproduce</h2>

<p dir="auto">Link to code example:</p>
<ul dir="auto">
<li>Broken React 18: <a href="https://codesandbox.io/s/nifty-bash-366bs4?file=/src/App.js" rel="nofollow">https://codesandbox.io/s/nifty-bash-366bs4?file=/src/App.js</a>
<ul dir="auto">
<li>This version uses the latest <code class="notranslate">react@next react-dom@next</code> to verify that the latest (unreleased) version doesn't work either.</li>
</ul>
</li>
<li>Working React 17: <a href="https://codesandbox.io/s/infallible-pine-n9vb4c?file=/src/App.js" rel="nofollow">https://codesandbox.io/s/infallible-pine-n9vb4c?file=/src/App.js</a></li>
</ul>

<h2 dir="auto">The current behavior</h2>
<p dir="auto">If you open the React 18 CodeSandbox link from above, what you will notice when you hit the <code class="notranslate">Open Dialog</code> button is that you will receive an event like <code class="notranslate">Got event in &lt;Dialog /&gt;!</code></p>
<p dir="auto">I tried to minimize the reproduction, the idea is that we have a <code class="notranslate">Dialog</code> component that receives an <code class="notranslate">open</code> prop, based on this prop we know to show the <code class="notranslate">Dialog</code> or not. However a <code class="notranslate">Dialog</code> should also have "outside click" behaviour, to fake this I setup a <code class="notranslate">window.addEventListener('click')</code> inside a useEffect to "capture" this behaviour. However when I click the <code class="notranslate">Open Dialog</code> button this is what happens:</p>
<ol dir="auto">
<li>Click <code class="notranslate">Open Dialog</code></li>
<li>Set <code class="notranslate">open</code> state to <code class="notranslate">true</code></li>
<li>Re-render component</li>
<li>Pass <code class="notranslate">open={true}</code> to the <code class="notranslate">Dialog</code> component</li>
<li>In a useEffect, setup the <code class="notranslate">window.addEventListener('click')</code> if the <code class="notranslate">open</code> value is true</li>
<li>The callback of the event listener receives the <code class="notranslate">click</code> event from step 1.</li>
</ol>
<p dir="auto">Console logs after clicking once on the <code class="notranslate">Open Dialog</code> button:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Open: false
*onClick*
Open: true
Got event in &lt;Dialog /&gt;!"><pre class="notranslate"><code class="notranslate">Open: false
*onClick*
Open: true
Got event in &lt;Dialog /&gt;!
</code></pre></div>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">If you open the React 17 CodeSandbox and repeat those steps from above, then you will see the expected behaviour where clicking on the <code class="notranslate">Open Dialog</code> does <strong>not</strong> trigger the log from within the <code class="notranslate">window.addEventListener('click')</code> it's only the second time that you click that button that it will log something because now the <code class="notranslate">Dialog</code> is considered in an <code class="notranslate">open</code> state.</p>
<p dir="auto">Console logs after clicking once on the <code class="notranslate">Open Dialog</code> button:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Open: false
*onClick*
Open: true"><pre class="notranslate"><code class="notranslate">Open: false
*onClick*
Open: true
</code></pre></div>
<p dir="auto">Is this a bug, a regression or am I doing something incorrect here? I'm confused how a <code class="notranslate">window.addEventListener</code> can receive an event from a click that happened before the listener was even setup <g-emoji class="g-emoji" alias="thinking" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f914.png">🤔</g-emoji></p>