I've been struggling for a long time now when working with timeouts and event listeners in parallel, in react. I'm having issues resetting and removing them in a correct way from the dom on unmount or timeout end.
I've created a sandbox to make this complicated issue easier to understand.
When clicking on one of the emails or phone numbers it shows a pop up which should be shown for 3 seconds and then removed. When clicking earlier than 3 seconds on another entry I want the earlier pop-up to be replaced by the new one, so every event listener and so on should be removed. But sometimes it's not working and only showing up for one second as the new state value uses the old timeout. Also, I want to animate it when removing it from the dom. So letting it fade out after the three seconds.
I've isolated the logic into the useClickPasteTextToClipboard hook.
Sandbox-Link: https://codesandbox.io/s/wonderful-tree-c37374?file=/src/App.tsx