chore: update eslint-plugin-react-hooks plugin (#8405)

* chore(eslint): bump eslint-plugin-react-hooks

* chore(eslint): update react hooks config

* refactor: fix lint problems

Author: araujogui

apps/site/eslint.config.js

@@ -1,7 +1,7 @@
 import next from '@next/eslint-plugin-next';
 import * as mdx from 'eslint-plugin-mdx';
 import react from 'eslint-plugin-react';
-import * as hooks from 'eslint-plugin-react-hooks';
+import reactHooks from 'eslint-plugin-react-hooks';
 
 import baseConfig from '../../eslint.config.js';
 
@@ -11,7 +11,7 @@ export default baseConfig.concat([
   },
 
   react.configs.flat['jsx-runtime'],
-  hooks.configs['recommended-latest'],
+  reactHooks.configs.flat['recommended-latest'],
   next.configs['core-web-vitals'],
   mdx.flatCodeBlocks,
 

apps/site/hooks/react-client/useMediaQuery.ts

@@ -3,17 +3,22 @@
 import { useState, useEffect } from 'react';
 
 const useMediaQuery = (query: string) => {
-  const [matches, setMatches] = useState(false);
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+
+    return window.matchMedia?.(query)?.matches ?? false;
+  });
 
   useEffect(() => {
-    const { matches, addEventListener, removeEventListener } =
-      window.matchMedia?.(query) ?? {
-        matches: false,
-        addEventListener: () => {},
-        removeEventListener: () => {},
-      };
-
-    setMatches(matches);
+    const { addEventListener, removeEventListener } = window.matchMedia?.(
+      query
+    ) ?? {
+      matches: false,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    };
 
     const handler = (event: MediaQueryListEvent) => setMatches(event.matches);
 

apps/site/package.json

@@ -93,7 +93,7 @@
     "eslint-config-next": "16.0.7",
     "eslint-plugin-mdx": "~3.6.2",
     "eslint-plugin-react": "~7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "global-jsdom": "^27.0.0",
     "handlebars": "4.7.8",
     "jsdom": "^27.2.0",

apps/site/providers/navigationStateProvider.tsx

@@ -16,6 +16,7 @@ export const NavigationStateProvider: FC<PropsWithChildren> = ({
   const navigationState = useRef<NavigationStateContextType>({});
 
   return (
+    // eslint-disable-next-line react-hooks/refs
     <NavigationStateContext.Provider value={navigationState.current}>
       {children}
     </NavigationStateContext.Provider>

packages/ui-components/eslint.config.js

@@ -1,12 +1,12 @@
 import react from 'eslint-plugin-react';
-import * as hooks from 'eslint-plugin-react-hooks';
+import reactHooks from 'eslint-plugin-react-hooks';
 import storybook from 'eslint-plugin-storybook';
 
 import baseConfig from '../../eslint.config.js';
 
 export default baseConfig.concat([
   react.configs.flat['jsx-runtime'],
-  hooks.configs['recommended-latest'],
+  reactHooks.configs.flat['recommended-latest'],
   ...storybook.configs['flat/recommended'],
 
   // Type-checking

packages/ui-components/package.json

@@ -64,7 +64,7 @@
     "cross-env": "catalog:",
     "css-loader": "~7.1.2",
     "eslint-plugin-react": "~7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-storybook": "~10.0.2",
     "global-jsdom": "^27.0.0",
     "postcss-cli": "^11.0.1",