From 4efc0fbd3eb57c035ac923c2a799508017e2a688 Mon Sep 17 00:00:00 2001
From: "Mr. X" <mjkgoa@gmail.com>
Date: Thu, 23 Apr 2020 22:01:42 +0530
Subject: [PATCH] fix: better hover use-effect

---
 ui/effects/use-hover.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/effects/use-hover.js b/ui/effects/use-hover.js
index 7a3b1a788..d153556b6 100644
--- a/ui/effects/use-hover.js
+++ b/ui/effects/use-hover.js
@@ -3,18 +3,18 @@ import { useEffect, useState } from 'react';
 export default function useHover(ref) {
   const [isHovering, setIsHovering] = useState(false);
 
-  useEffect(() => {
-    function handleHover() {
-      setIsHovering(!isHovering);
-    }
+  const hoverFunc = () => setIsHovering(true);
+  const unHoverFunc = () => setIsHovering(false);
 
+  useEffect(() => {
     const refElement = ref.current;
     if (refElement) {
-      refElement.addEventListener('mouseenter', handleHover);
-      refElement.addEventListener('mouseleave', handleHover);
+      refElement.addEventListener('mouseenter', hoverFunc);
+      refElement.addEventListener('mouseleave', unHoverFunc);
+
       return () => {
-        refElement.removeEventListener('mouseenter', handleHover);
-        refElement.removeEventListener('mouseleave', handleHover);
+        refElement.removeEventListener('mouseenter', hoverFunc);
+        refElement.removeEventListener('mouseleave', unHoverFunc);
       };
     }
   }, [ref, isHovering]);