One crucial aspect to consider is the invalidation of the timeout callback when triggered by the mouseLeave event. It's essential to keep track of the returned value from setTimeout so that you can use clearTimeout before the timer runs out (or if the component unmounts!)
Below is the basic setup in a class-based component:
state = {
hovered: false
};
timer;
mouseEnterHandler = () => this.setState({ hovered: true });
mouseLeaveHandler = () => this.setState({ hovered: false });
onTimeout = () => {
// Perform action
};
clearTimer = () => {
clearTimeout(this.timer);
};
componentDidUpdate() {
const { hovered } = this.state;
if (hovered) {
this.timer = setTimeout(this.onTimeout, 500);
} else {
this.clearTimer();
}
}
componentWillUnmount() {
this.clearTimer();
}
Here is the equivalent logic for a functional component:
const [hovered, setHovered] = useState(false);
const mouseEnterHandler = () => sethovered(true);
const mouseLeaveHandler = () => sethovered(false);
const onTimeout = () => {
// Perform action
};
useEffect(() => {
const timer = hovered && setTimeout(onTimeout, 500);
return () => {
clearTimeout(timer);
};
}, [hovered]);
https://codesandbox.io/s/pedantic-flower-wsp3z?expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js&theme=dark