Race condition between click and new eventlistener

[blaisebrennan]

Do you want to request a feature or report a bug?
Possible bug

What is the current behavior?
Clicking a button adds a new Card component to a list of Cards. Each rendered Card adds an event listener (with React.useEffect()) to the window so that it can detect when a user "clicks away" from the card. This event listener somehow captures the click which created the Card in the first place, falsely registering as a "click away" from the new Card.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
I'll put together a JSFiddle if I find some time...

What is the expected behavior?
Because the eventlistener is added as the new Card is rendered, I expect the eventlistener to only capture future clicks.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.8.4, Chrome, Windows

[Nathan-Fenner]

Not able to reproduce this: https://codesandbox.io/s/3vru7 (each card counts the number of clicks on the window; color is just used to indicate card identity)

[afreix]

@Nathan-Fenner thanks for making that. Is it possible that in a more complicated environment that this race condition could reveal itself? Does React make guarantees about the order of execution in this situation?

[threepointone]

It's hard to comment on this without a reproducing example. Further, we've landed some fixes that may or may not have resolved this issue if it indeed did exist. Closing this for now, but happy to reopen if you can provide a codesandbox/git repo link to an example that shows the problem.

[stoickeyboard]

I ran into this same issue. Unfortunately, I can't reproduce in codesandbox by writing up an example. @afreix might be right about a more complicated environment being necessary. That being said, I found using 'mousedown' instead of 'click' to fix the issue. Although it's not ideal, others that have this same issue can try that.

[emileber]

Possibly related to #20074 which is, roughly, where useEffect are synchronous when triggered during a discrete event and that some component is using useLayoutEffect.