Why is the listener on react element breaking?

Question

JavaScript

https://codesandbox.io/s/eager-noether-lbe98r?file...

There is a block with a state, the "A" component and the state itself are rendered inside it.

Inside component A, a div is rendered, inside which, in useEffect , we set the layout via innerHtml and hang up a listener on click.

When you click on this div, everything works fine 1 time, and then everything breaks, which is why this happens. Due to the fact that the react analyzes the real house and the virtual one, and something does not converge with it?

If because of this, is it possible to somehow hack it so that React thinks that the div is empty?

Answer 1

Corrected version - https://codesandbox.io/s/immutable-breeze-ycwnoy
Why the original did not work: a function was passed to component A that closed count. Upon mounting, the component hung a function in the onclick div, and did not change this div in any way. That is, the function that was created on the first render of App and closed count===0 was permanently stuck in the click handler. When re-rendering App, new functions were created, but they were not applied.
in the new version, I stuck console.log so that you can see when and what happens.