Bug: Re-rendering nested components breaks event listeners on parent

[greebl3]

Re-rendering nested components breaks event-handlers; wrapping handler functions in useCallback makes no difference

React version: 18.2

Link to code example: https://codesandbox.io/s/re-rendering-breaks-event-listener-2dxjhz

Note: The repro makes use of Touch events, so open the Sandbox link on a mobile device

The current behavior

onTouchEnd does not fire when re-rendering a nested component, even when caching handler-functions with useCallback

The expected behavior

Re-rendering a nested component should have no effect on its parent's event-listeners

[greebl3]

Figured out the issue is specific to re-rendering nested components. Still seems like unexpected behavior, so I'm reopening the issue with appropriate edits.

Definitely possible that I'm overlooking something obvious, so please feel free to reply with your thoughts

[MarceloSpessoto]

Hello @greebl3 , looks like the onTouchEnd event listener breaks as soon as the nested component is re-rendered for the first time. I agree with you that this behavior is unexpected and I'll try to check how to deal with that. Have you found any solution/extra insight during this week?

[greebl3]

Thanks for looking into it @MarceloSpessoto. I feel like this is not a niche issue and/or has implications on a lot of production builds so it would be nice to get more visibility on this.

As a stop-gap, I wrapped the extracted child component in a useCallback. I'll be sure to update this thread when I get the chance to do more digging.

[sweetliquid]

A more visual example: https://codesandbox.io/p/sandbox/re-rendering-breaks-event-listener-forked-p5kqck

See the console log:

mounted
    start
unmounted
mounted
    start
unmounted
mounted
    start
unmounted
mounted
    start

onMouseEnter is called repeatedly on every time the button is mounted.

[sweetliquid]

It doesn't look like onTouchEnd isn't being triggered, but onTouchStart is being called multiple times.

In the example you provided, calling onTouchStart multiple times setup multiple interval timers, but ultimately onTouchEnd is only called once, and remaining interval times is leaked.

[sweetliquid]

I can find time to investigate this issue in the evenings of these few days.

[syd-shields]

Encountering a similar issue (will be opening an issue). Event handlers across the entire window break when re-rendering a nested conditional component. (Edited)

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[greebl3]

bumping