enforce lint rule hooks - poc

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.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",

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

@@ -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/OutputNameEditor/OutputNameEditor.tsx

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

src/components/Home/PipelineSection/BulkActionsBar.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/PipelineRow.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/RunSection/RunRow.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/PipelineRun/components/CancelPipelineRunButton.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/RerunPipelineButton.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) => {

src/components/shared/Authentication/AuthorizedUserProfile.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { LogOutIcon } from "lucide-react";
-import { useEffectEvent, useSyncExternalStore } from "react";
+import { useCallback, useSyncExternalStore } from "react";
 
 import { Icon } from "@/components/ui/icon";
 import { Spinner } from "@/components/ui/spinner";
@@ -52,10 +52,11 @@ export function AuthorizedUserProfile() {
   );
   const profile = localTokenStorage.getJWT();
 
-  const onLogoutSuccess = useEffectEvent(() => {
+  const onLogoutSuccess = useCallback(() => {
     queryClient.invalidateQueries({ queryKey: ["user"] });
     localTokenStorage.clear();
-  });
+  }, [queryClient, localTokenStorage]);
+
   const { mutate: logout, isPending } = useLogout({
     onSuccess: onLogoutSuccess,
   });

src/components/shared/ComponentEditor/components/PythonComponentEditor.tsx

@@ -77,7 +77,12 @@ export const PythonComponentEditor = withSuspenseWrapper(
           setValidationErrors(errors);
         }
       },
-      [yamlGenerator, onComponentTextChange, yamlGeneratorOptions],
+      [
+        yamlGenerator,
+        yamlGeneratorOptions,
+        onComponentTextChange,
+        onErrorsChange,
+      ],
     );
 
     useEffect(() => {

src/components/shared/ComponentEditor/components/YamlComponentEditor.tsx

@@ -39,7 +39,7 @@ export const YamlComponentEditor = withSuspenseWrapper(
         setValidationErrors([]);
         onErrorsChange([]);
       },
-      [onComponentTextChange, validateComponentSpec],
+      [onComponentTextChange, onErrorsChange, validateComponentSpec],
     );
 
     return (

src/components/shared/Dialogs/BackendConfigurationDialog.tsx

@@ -109,14 +109,18 @@ const BackendConfigurationDialog = ({
   }, [isConfiguredFromEnv, isConfiguredFromRelativePath, setOpen]);
 
   useEffect(() => {
-    setIsEnvConfig(isConfiguredFromEnv);
-    setIsRelativePathConfig(isConfiguredFromRelativePath);
+    queueMicrotask(() => {
+      setIsEnvConfig(isConfiguredFromEnv);
+      setIsRelativePathConfig(isConfiguredFromRelativePath);
+    });
   }, [isConfiguredFromEnv, isConfiguredFromRelativePath]);
 
   useEffect(() => {
-    setInputBackendUrl(
-      isConfiguredFromEnv || isConfiguredFromRelativePath ? "" : backendUrl,
-    );
+    queueMicrotask(() => {
+      setInputBackendUrl(
+        isConfiguredFromEnv || isConfiguredFromRelativePath ? "" : backendUrl,
+      );
+    });
   }, [isConfiguredFromEnv, isConfiguredFromRelativePath, backendUrl]);
 
   const hasBackendConfigured =

src/components/shared/Dialogs/ComponentDetailsDialog.tsx

@@ -201,12 +201,15 @@ const ComponentDetails = ({
     setIsEditDialogOpen(false);
   }, []);
 
-  const onOpenChange = useCallback((open: boolean) => {
-    setOpen(open);
-    if (!open) {
-      onClose?.();
-    }
-  }, []);
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      setOpen(open);
+      if (!open) {
+        onClose?.();
+      }
+    },
+    [onClose],
+  );
 
   const handleEditComponent = useCallback(() => {
     setIsEditDialogOpen(true);
@@ -227,7 +230,7 @@ const ComponentDetails = ({
     );
 
     return [...actions, EditButton];
-  }, [actions, hasEnabledInAppEditor, handleEditComponent]);
+  }, [hasEnabledInAppEditor, actions, handleEditComponent, displayName]);
 
   return (
     <>

src/components/shared/Dialogs/ComponentDuplicateDialog.tsx

@@ -60,7 +60,7 @@ const ComponentDuplicateDialog = ({
       );
       setNewDigest(digest);
     }
-  }, [newComponent, newName]);
+  }, [newComponent, newComponentDigest, newName]);
 
   const handleOnOpenChange = useCallback(
     (open: boolean) => {
@@ -82,7 +82,7 @@ const ComponentDuplicateDialog = ({
 
       setClose();
     },
-    [handleImportComponent, setClose],
+    [handleImportComponent, newComponent, setClose],
   );
 
   const handleReplaceAndImport = useCallback(async () => {
@@ -94,7 +94,7 @@ const ComponentDuplicateDialog = ({
     handleImportComponent(yamlString);
 
     setClose();
-  }, [handleImportComponent, setClose]);
+  }, [existingComponent?.name, handleImportComponent, newComponent, setClose]);
 
   const handleCancel = useCallback(() => {
     setClose();
@@ -118,7 +118,7 @@ const ComponentDuplicateDialog = ({
     }
 
     generateNewDigest();
-  }, [existingComponent, newComponent]);
+  }, [existingComponent, newComponent, newComponentDigest]);
 
   return (
     <Dialog open={open} onOpenChange={handleOnOpenChange}>

src/components/shared/Dialogs/InputDialog.tsx

@@ -68,15 +68,19 @@ export function InputDialog({
 
   useEffect(() => {
     if (isOpen) {
-      setValue(defaultValue);
-      setError(null);
+      queueMicrotask(() => {
+        setValue(defaultValue);
+        setError(null);
+      });
     }
   }, [isOpen, defaultValue]);
 
   useEffect(() => {
     if (isOpen && defaultValue && validate) {
       const validationError = validate(defaultValue.trim());
-      setError(validationError);
+      queueMicrotask(() => {
+        setError(validationError);
+      });
     }
   }, [isOpen, defaultValue, validate]);