enforce lint rule hooks - poc

Author: maxy-shpfy

eslint.config.js

@@ -1,5 +1,6 @@
 import pluginJs from "@eslint/js";
 import pluginReact from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
 import simpleImportSort from "eslint-plugin-simple-import-sort";
 import globals from "globals";
 import tseslint from "typescript-eslint";
@@ -11,8 +12,20 @@ export default [
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   pluginReact.configs.flat.recommended,
+  reactHooks.configs.flat.recommended,
   {
     rules: {
+      "react-hooks/exhaustive-deps": [
+        "warn",
+        // I left this commented out because it causes infinite loops in the codebase,
+        //    but may useful for mass-refactoring.
+        // {
+        //   enableDangerousAutofixThisMayCauseInfiniteLoops: true,
+        // },
+      ],
+      "react-hooks/set-state-in-effect": "warn",
+      "react-hooks/refs": "warn",
+      "react-hooks/immutability": "warn",
       "@typescript-eslint/no-explicit-any": "off",
       "react/react-in-jsx-scope": "off",
       "@typescript-eslint/no-empty-object-type": "off",

package-lock.json

@@ -35,7 +35,8 @@
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:headed": "playwright test --headed",
-    "lint": "eslint src --config eslint.config.js",
+    "lint": "eslint --quiet src --config eslint.config.js",
+    "lint:all": "eslint src --config eslint.config.js",
     "format": "prettier --write .",
     "typecheck": "tsc --noEmit",
     "gh-pages": "npm run build:ghpages && gh-pages -d dist",
@@ -115,6 +116,7 @@
     "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^9.39.1",
     "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^16.5.0",
     "jsdom": "^27.2.0",
     "knip": "^5.63.1",

package.json

@@ -141,7 +141,7 @@ export const InputValueEditor = ({
 
       setValidationError(null);
     },
-    [input.name, currentSubgraphSpec],
+    [input.name, componentSpec],
   );
 
   const hasChanges = useCallback(() => {
@@ -203,7 +203,7 @@ export const InputValueEditor = ({
       void navigator.clipboard.writeText(inputValue.trim());
       notify("Input value copied to clipboard", "success");
     }
-  }, [inputValue]);
+  }, [inputValue, notify]);
 
   const deleteNode = useCallback(async () => {
     if (!currentSubgraphSpec.inputs) return;
@@ -258,17 +258,21 @@ export const InputValueEditor = ({
   }, []);
 
   useEffect(() => {
-    setInputValue(initialInputValue);
-    setInputName(input.name);
-    setInputType(input.type?.toString() ?? "any");
-    setInputOptional(initialIsOptional);
-    setValidationError(null);
+    queueMicrotask(() => {
+      setInputValue(initialInputValue);
+      setInputName(input.name);
+      setInputType(input.type?.toString() ?? "any");
+      setInputOptional(initialIsOptional);
+      setValidationError(null);
+    });
   }, [input, initialInputValue, initialIsOptional]);
 
   useEffect(() => {
     if (triggerSave) {
-      saveChanges();
-      setTriggerSave(false);
+      queueMicrotask(() => {
+        saveChanges();
+        setTriggerSave(false);
+      });
     }
   }, [triggerSave, saveChanges]);
 

src/components/Editor/IOEditor/InputValueEditor/InputValueEditor.tsx

@@ -122,7 +122,7 @@ export const OutputNameEditor = ({
 
       setValidationError(null);
     },
-    [currentSubgraphSpec, output.name],
+    [componentSpec, output.name],
   );
 
   const deleteNode = useCallback(async () => {

src/components/Editor/IOEditor/OutputNameEditor/OutputNameEditor.tsx

@@ -37,7 +37,7 @@ const BulkActionsBar = ({
       const errorMessage = getErrorMessage(error);
       notify("Failed to delete some pipelines: " + errorMessage, "error");
     }
-  }, [selectedPipelines, onDeleteSuccess]);
+  }, [selectedPipelines, onDeleteSuccess, notify]);
 
   return (
     <div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-background border border-border rounded-lg shadow-lg p-4 z-50">

src/components/Home/PipelineSection/BulkActionsBar.tsx

@@ -74,7 +74,7 @@ const PipelineRow = ({
     };
 
     await deletePipeline(name, deleteCallback);
-  }, [name]);
+  }, [name, onDelete]);
 
   const handleClick = useCallback((e: MouseEvent) => {
     // Prevent row click when clicking on the checkbox

src/components/Home/PipelineSection/PipelineRow.tsx

@@ -41,7 +41,7 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
       navigator.clipboard.writeText(createdBy);
       notify(`"${createdBy}" copied to clipboard`, "success");
     },
-    [createdBy],
+    [createdBy, notify],
   );
 
   const statusCounts = convertExecutionStatsToStatusCounts(

src/components/Home/RunSection/RunRow.tsx

@@ -53,7 +53,7 @@ export const CancelPipelineRunButton = ({
     } catch (error) {
       notify(`Error cancelling run: ${error}`, "error");
     }
-  }, [runId, available]);
+  }, [runId, available, notify, cancelPipeline]);
 
   const onClick = useCallback(() => {
     setIsOpen(true);

src/components/PipelineRun/components/CancelPipelineRunButton.tsx

@@ -28,9 +28,12 @@ export const RerunPipelineButton = ({
   const { awaitAuthorization, isAuthorized } = useAwaitAuthorization();
   const { getToken } = useAuthLocalStorage();
 
-  const onSuccess = useCallback((response: PipelineRun) => {
-    navigate({ to: `${APP_ROUTES.RUNS}/${response.id}` });
-  }, []);
+  const onSuccess = useCallback(
+    (response: PipelineRun) => {
+      navigate({ to: `${APP_ROUTES.RUNS}/${response.id}` });
+    },
+    [navigate],
+  );
 
   const onError = useCallback(
     (error: Error | string) => {