Clean up our hook dependency arrays

This change adds the `eslint-plugin-react-hooks` plugin to ensure that
our hook dependency arrays stay up to date. Additionally, I went and
cleaned up all our dependency arrays that were capturing state setters
because it turns out you don't need to include those in your
dependencies because they never change.

Author: freshstrangemusic

package-lock.json

@@ -45,6 +45,7 @@
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-mozilla": "^3.1.0",
     "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "npm-run-all": "^4.1.5",
     "parcel": "^2.9.3",
     "prettier": "^3.0.0",

package.json

@@ -8,6 +8,7 @@ module.exports = {
     "plugin:import/typescript",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended-legacy",
   ],
   env: {
     es2023: true,
@@ -40,5 +41,6 @@ module.exports = {
         ignoreRestArgs: true,
       },
     ],
+    "react-hooks/exhaustive-deps": "error",
   },
 };

src/ui/.eslintrc.js

@@ -25,9 +25,12 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ onSelectFeatureConfigId }) => {
     })();
   }, [addToast]);
 
-  const handleChange = useCallback((event: ChangeEvent<HTMLSelectElement>) => {
-    onSelectFeatureConfigId(event.target.value);
-  }, []);
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLSelectElement>) => {
+      onSelectFeatureConfigId(event.target.value);
+    },
+    [onSelectFeatureConfigId],
+  );
 
   return (
     <Form.Group controlId="featureConfigSelect">

src/ui/components/DropdownMenu.tsx

@@ -48,7 +48,7 @@ const ExperimentRow: FC<{ experiment: NimbusExperiment }> = ({
     (e: React.ChangeEvent<HTMLSelectElement>) => {
       setSelectedBranch(e.target.value);
     },
-    [setSelectedBranch],
+    [],
   );
 
   const handleGenerateTestIds = useCallback(async () => {

src/ui/components/ExperimentBrowserPage.tsx

@@ -27,7 +27,7 @@ const ExperimentStorePage: FC = () => {
         variant: "danger",
       });
     }
-  }, [experiments, addToast]);
+  }, [addToast]);
 
   useEffect(() => {
     void fetchExperiments();

src/ui/components/ExperimentStorePage.tsx

@@ -80,11 +80,11 @@ const FeatureConfigPage: FC = () => {
   const handleModalConfirm = useCallback(async () => {
     setEnrollError(null);
     await handleEnrollClick(null, true);
-  }, [handleEnrollClick, setEnrollError]);
+  }, [handleEnrollClick]);
 
   const handleModalClose = useCallback(() => {
     setEnrollError(null);
-  }, [setEnrollError]);
+  }, []);
 
   return (
     <Container className="main-content p-2 overflow-hidden">

src/ui/components/FeatureConfigPage.tsx

@@ -178,7 +178,7 @@ const JEXLDebuggerPage: FC = () => {
 
   useEffect(() => {
     void fetchClientContext();
-  }, []);
+  }, [fetchClientContext]);
 
   const handleExpressionChange = useCallback(
     (event: ChangeEvent<HTMLTextAreaElement>) => {
@@ -237,7 +237,7 @@ const JEXLDebuggerPage: FC = () => {
         }
       }
     }, 1000);
-  }, [addToast, setModifiedContext]);
+  }, [addToast]);
 
   const handleContextChange = useCallback<OnChangeFn>(
     (key: string, value: FormDataValue, fieldType: FieldType) => {
@@ -276,7 +276,7 @@ const JEXLDebuggerPage: FC = () => {
         [key]: value,
       }));
     },
-    [setModifiedContext, setFormData, parseAndSetContext],
+    [parseAndSetContext],
   );
 
   return (

src/ui/components/JEXLDebuggerPage.tsx

@@ -16,7 +16,7 @@ const RecipeEnrollmentPage: FC = () => {
     (event: ChangeEvent<HTMLTextAreaElement>) => {
       setJsonInput(event.target.value);
     },
-    [setJsonInput],
+    [],
   );
 
   const handleEnrollClick = useCallback(
@@ -63,17 +63,17 @@ const RecipeEnrollmentPage: FC = () => {
         });
       }
     },
-    [jsonInput, setJsonInput, addToast, setEnrollError],
+    [jsonInput, addToast],
   );
 
   const handleModalConfirm = useCallback(async () => {
     setEnrollError(null);
     await handleEnrollClick(undefined, true);
-  }, [handleEnrollClick, setEnrollError]);
+  }, [handleEnrollClick]);
 
   const handleModalClose = useCallback(() => {
     setEnrollError(null);
-  }, [setEnrollError]);
+  }, []);
 
   return (
     <Container className="main-content m-0 p-2">

src/ui/components/RecipeEnrollmentPage.tsx

@@ -58,7 +58,7 @@ const SettingsPage: FC = () => {
         }
       }
     },
-    [customCollection, collectionId, setCollectionId, addToast],
+    [customCollection, addToast],
   );
 
   const handleCustomChange = useCallback(
@@ -76,7 +76,7 @@ const SettingsPage: FC = () => {
         }
       }
     },
-    [collectionId, customCollection, setCustomCollection, addToast],
+    [collectionId, addToast],
   );
 
   const handleForceSyncChange = useCallback(
@@ -96,7 +96,7 @@ const SettingsPage: FC = () => {
         variant: "danger",
       });
     }
-  }, [forceSync, setForceSync, addToast]);
+  }, [forceSync, addToast]);
 
   return (
     <Container fluid className="main-content py-4 p-2 overflow-hidden">