Add eslint-plugin-react-hooks (#412)

Author: Nicolapps

app/components/chat/Artifact.tsx

@@ -60,6 +60,8 @@ export const Artifact = memo(function Artifact({ partId }: ArtifactProps) {
         setAllActionFinished(finished);
       }
     }
+    // We only want to run this when `actions` changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actions]);
 
   return (

app/components/editor/codemirror/CodeMirrorEditor.tsx

@@ -275,8 +275,7 @@ export const CodeMirrorEditor = memo(
       // We don’t want this to run when `doc` changes without a change in isBinary/filePath/value
       // (i.e. a change when only `scroll` changes). While `setEditorDocument` uses the scroll
       // position, it only needs it when `isFileChange` is set to true.
-      // TODO(nicolas): enable this when react-hooks is enabled
-      // // eslint-disable-next-line react-hooks/exhaustive-deps
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
       doc?.isBinary,
       doc?.value,

app/components/settings/UsageCard.tsx

@@ -15,12 +15,14 @@ export function UsageCard() {
   const convex = useConvex();
 
   const teams = useStore(convexTeamsStore);
+  const [selectedTeamSlug, setSelectedTeamSlug] = useState(useSelectedTeamSlug() ?? teams?.[0]?.slug ?? null);
   useEffect(() => {
     if (teams && !selectedTeamSlug) {
       setSelectedTeamSlug(teams[0]?.slug);
     }
+    // No need to run if only `selectedTeamSlug` changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [teams]);
-  const [selectedTeamSlug, setSelectedTeamSlug] = useState(useSelectedTeamSlug() ?? teams?.[0]?.slug ?? null);
 
   const [isLoadingUsage, setIsLoadingUsage] = useState(true);
   const [tokenUsage, setTokenUsage] = useState<{

eslint.config.mjs

@@ -3,6 +3,7 @@ import { jsFileExtensions } from '@blitz/eslint-plugin/dist/configs/javascript.j
 import { getNamingConventionRule, tsFileExtensions } from '@blitz/eslint-plugin/dist/configs/typescript.js';
 import tailwindcss from "eslint-plugin-tailwindcss";
 import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
 
 export default [
   {
@@ -13,10 +14,12 @@ export default [
     files: [...tsFileExtensions, ...jsFileExtensions],
     plugins: {
       react: reactPlugin,
+      "react-hooks": reactHooksPlugin,
     },
     rules: {
       ...reactPlugin.configs.flat.recommended.rules,
       ...reactPlugin.configs.flat['jsx-runtime'].rules,
+      ...reactHooksPlugin.configs.recommended.rules,
 
       '@blitz/lines-around-comment': 'off',
       '@blitz/newline-before-return': 'off',

package.json

@@ -153,6 +153,7 @@
     "convex-test": "^0.0.36",
     "eslint": "9.20.1",
     "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-tailwindcss": "^3.18.0",
     "events": "^3.3.0",
     "fast-glob": "^3.3.2",