fix: use stable references for event listeners in Spotlight component

Anonymous arrow functions create different references on add/remove,
so the listeners were never actually removed.

Closes #933
This commit is contained in:
likiosliu 2026-03-25 10:32:11 +08:00
parent 8232893fbb
commit 8d8c36fc59

View file

@ -48,14 +48,17 @@ export function Spotlight({
useEffect(() => {
if (!parentElement) return;
const handleEnter = () => setIsHovered(true);
const handleLeave = () => setIsHovered(false);
parentElement.addEventListener("mousemove", handleMouseMove);
parentElement.addEventListener("mouseenter", () => setIsHovered(true));
parentElement.addEventListener("mouseleave", () => setIsHovered(false));
parentElement.addEventListener("mouseenter", handleEnter);
parentElement.addEventListener("mouseleave", handleLeave);
return () => {
parentElement.removeEventListener("mousemove", handleMouseMove);
parentElement.removeEventListener("mouseenter", () => setIsHovered(true));
parentElement.removeEventListener("mouseleave", () => setIsHovered(false));
parentElement.removeEventListener("mouseenter", handleEnter);
parentElement.removeEventListener("mouseleave", handleLeave);
};
}, [parentElement, handleMouseMove]);