[react 17] Bug: Click event being picked up by component rendered by the click

[tholman]

React version: 17.2

Steps To Reproduce

1. 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 componentDidMount checking for clicks, the new component will trigger that event

Link to code example: https://codepen.io/tholman/pen/87c661f0c893a2f8727db927c48d6d12

(this does not happen if the created component uses hooks to add its event listener)

The current behavior

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.

The expected behavior

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 componentDidMount function, I would assume the "click" is complete, and wouldn't be detected.

[akkolahal]

Hey! Can I take up this issue?

[BennyCarlsson]

This happened to me using React18 and hooks.

Example: https://codesandbox.io/s/festive-mopsa-lgke69?file=/src/App.js

Got a solution using e.stopPropagation() from creating a stackoverflow question. but it's still weird it's happening. https://stackoverflow.com/questions/72315874/react-18-addeventlistentclick-triggers-on-a-click-that-happens-before-compon

[sargalias]

Related or duplicate of https://github.com/facebook/react/issues/24657?

[eps1lon]

Duplicate of https://github.com/facebook/react/issues/24657. Check out https://github.com/facebook/react/issues/24657#issuecomment-1150119055 for an extensive explanation