[BUG] `delayEnter` and `delayLeave` timers don't clear properly if running on unmount

[Christopher Dunavan]

Describe the bug
It seems like the delayEnter and delayLeave timers don't clear properly if running on unmount, causing React to issue the following:
"Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function."

Here's a simple sandbox

• Watch the console log
• Hover the div and click the button before 1000ms runs out to unmount the component
• see log

To Reproduce

1. Set useHover with a 1000ms for delayEnter like:
   const [isOver, hoverProps] = useHover({ delayEnter: 1000, delayLeave: 100 });
2. Start app and hover over component to start timer
3. Unmount the component before 1000ms runs out.
4. See error

Expected behavior
No error

Browser / OS (please complete the following information):

• OS: macos
• Browser: chrome
• Version 90.0.4430.93 (Official Build) (x86_64)

Additional context
The same thing happens if you set delayLeave for a longer time, mouse out of the hover area and unmount before the timer is done.
I do not get the error if I unmount the page after the tooltip is displayed.
I'm using React Router to switch pages which is causing the unmounting.
The element that is hovered does not have to be involved in the transition, in my case, I am using a keyboard shortcut to push a different route. But the error also happens if I use a button with a tooltip to push a route.

[Erik Verweij]

Thanks @HyperSprite for submitting this issue.
I'm closing this issue because of the fix by @tomasz89nowak that just got merged :)

[Christopher Dunavan]

Awesome, thanks @tomasz89nowak and @everweij