fix: useHoverDirty eslint fix

streamich · Feb 29, 2020 · 0ed6521 · 0ed6521
1 parent d4489d0
commit 0ed6521
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/src/useHoverDirty.ts b/src/useHoverDirty.ts
@@ -1,8 +1,7 @@
-/* eslint-disable */
-import { useEffect, useState } from 'react';
+import { RefObject, useEffect, useState } from 'react';
 
 // kudos: https://usehooks.com/
-const useHoverDirty = (ref, enabled: boolean = true) => {
+const useHoverDirty = (ref: RefObject<Element>, enabled: boolean = true) => {
   if (process.env.NODE_ENV === 'development') {
     if (typeof ref !== 'object' || typeof ref.current === 'undefined') {
       console.error('useHoverDirty expects a single ref argument.');
@@ -20,10 +19,13 @@ const useHoverDirty = (ref, enabled: boolean = true) => {
       ref.current.addEventListener('mouseout', onMouseOut);
     }
 
+    // fixes react-hooks/exhaustive-deps warning about stale ref elements
+    const { current } = ref;
+
     return () => {
-      if (enabled && ref && ref.current) {
-        ref.current.removeEventListener('mouseover', onMouseOver);
-        ref.current.removeEventListener('mouseout', onMouseOut);
+      if (enabled && current) {
+        current.removeEventListener('mouseover', onMouseOver);
+        current.removeEventListener('mouseout', onMouseOut);
       }
     };
   }, [enabled, ref]);