Fix useOnClickOutside deps

Author: renatodellosso

src/hooks/useOnClickOutside.ts

@@ -12,28 +12,31 @@ export default function useOnClickOutside<TRef extends HTMLElement>({
 }) {
   const ref = useRef<TRef>(null);
 
-  useEffect(() => {
-    if (!ref.current) return;
+  useEffect(
+    () => {
+      if (!ref.current) return;
 
-    function handleClickOutside(event: Event) {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        onClick();
+      function handleClickOutside(event: Event) {
+        if (ref.current && !ref.current.contains(event.target as Node)) {
+          onClick();
+        }
       }
-    }
 
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") {
-        onClick();
+      function handleKeyDown(event: KeyboardEvent) {
+        if (event.key === "Escape") {
+          onClick();
+        }
       }
-    }
 
-    document.addEventListener("click", handleClickOutside);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [onClick, deps]);
+      document.addEventListener("click", handleClickOutside);
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("click", handleClickOutside);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    },
+    ([onClick] as unknown[]).concat(deps)
+  );
 
   return ref;
 }