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."
Hover the div and click the button before 1000ms runs out to unmount the component
see log
To Reproduce
Set useHover with a 1000ms for delayEnter like:
const [isOver, hoverProps] = useHover({ delayEnter: 1000, delayLeave: 100 });
Start app and hover over component to start timer
Unmount the component before 1000ms runs out.
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.
Describe the bug It seems like the
delayEnter
anddelayLeave
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
To Reproduce
const [isOver, hoverProps] = useHover({ delayEnter: 1000, delayLeave: 100 });
Expected behavior No error
Browser / OS (please complete the following information):
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.