document swipe on one page in SPA causes multiple event handlers

[tomasz13nocon]

I'd like to have a document wide swipe event only on one page in an SPA. When on that page, I want the swipe to work on components that are shared across multiple pages, so it needs to be on document. When navigating between pages the swipe events don't get removed and new ones get added.

Maybe a cleanup function could be provided, which could be returned in useEffect.

Reproduction: https://codesandbox.io/s/react-swipeable-event-stacking-pcrw2o?file=/src/Page.js Go between "Home" and "Other page" a couple of times, then swipe left or right and see console output. These stale events also fire when swiping in "Home" even tough they have no effect in this example since they close over an unmounted component.

[hartzis]

briefly looking at the issue and code and knowing how the ref method works you could possibly try returning a function in the setup useEffect that "calls" ref with an empty object to trigger the clean up method internally

React.useEffect(() => {
    ref(document);
    return () => ref({});
  });

• writing from a mobile device, pardon errors 😅

[tomasz13nocon]

Indeed that fixes the issue. Thank you very much!