♻️ Removed the need of commenting out useEffect deps (#383)

* Removed the need of commenting out useEffect deps

* 🔖 Add changeset

---------

Co-authored-by: Lisandro Cobeaga <lisandro.cobeaga@inworx.com>
Co-authored-by: Julien <juliencaron@protonmail.com>

.changeset/calm-stingrays-lick.md

@@ -0,0 +1,5 @@
+---
+"usehooks-ts": patch
+---
+
+Remove the need of commenting out useEffect deps in useMediaQuery (#383 by @lisandro52)

packages/usehooks-ts/src/useMediaQuery/useMediaQuery.ts

@@ -1,21 +1,21 @@
 import { useEffect, useState } from 'react'
 
-export function useMediaQuery(query: string): boolean {
-  const getMatches = (query: string): boolean => {
-    // Prevents SSR issues
-    if (typeof window !== 'undefined') {
-      return window.matchMedia(query).matches
-    }
-    return false
+const getMatches = (query: string): boolean => {
+  // Prevents SSR issues
+  if (typeof window !== 'undefined') {
+    return window.matchMedia(query).matches
   }
+  return false
+}
 
+export function useMediaQuery(query: string): boolean {
   const [matches, setMatches] = useState<boolean>(getMatches(query))
 
-  function handleChange() {
-    setMatches(getMatches(query))
-  }
-
   useEffect(() => {
+    function handleChange() {
+      setMatches(getMatches(query))
+    }
+
     const matchMedia = window.matchMedia(query)
 
     // Triggered at the first client-side load and if query changes
@@ -35,7 +35,6 @@ export function useMediaQuery(query: string): boolean {
         matchMedia.removeEventListener('change', handleChange)
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [query])
 
   return matches