Enforce react-hooks/exhaustive-deps

applications/browser-extension/.eslintrc.js

@@ -64,6 +64,14 @@ module.exports = {
       "error",
       { ignore: ["eslint-enable"] },
     ],
+    "react-hooks/exhaustive-deps": [
+      "error",
+      {
+        // Can't add useAsyncEffect to the additionalHooks property because rule complains about passing
+        // `async` methods to hooks. (Because it's technically non-deterministic in execution order)
+        // https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#advanced-configuration
+      },
+    ],
     "jest/valid-title": [
       "error",
       {

applications/browser-extension/src/components/ConfirmationModal.stories.tsx

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { type ComponentProps, useCallback } from "react";
+import React, { type ComponentProps } from "react";
 import { type ComponentMeta, type Story } from "@storybook/react";
 import AsyncButton from "./AsyncButton";
 import { ModalProvider, useModals } from "@/components/ConfirmationModal";
@@ -48,17 +48,22 @@ const ChildComponent = ({
   cancelCaption,
 }: ChildComponentType) => {
   const { showConfirmation } = useModals();
-  const buttonAction = useCallback(async () => {
-    await showConfirmation({
-      title,
-      message,
-      submitCaption,
-      cancelCaption,
-    });
+  return (
+    <AsyncButton
+      onClick={async () => {
+        await showConfirmation({
+          title,
+          message,
+          submitCaption,
+          cancelCaption,
+        });
 
-    // Do any action here if confirm === true
-  }, [showConfirmation]);
-  return <AsyncButton onClick={buttonAction}>Confirm Modal</AsyncButton>;
+        // Do any action here if confirm === true
+      }}
+    >
+      Confirm Modal
+    </AsyncButton>
+  );
 };
 
 const Template: Story<StoryType> = (args) => {

applications/browser-extension/src/extensionConsole/pages/mods/ModsPageActions.tsx

@@ -203,6 +203,7 @@ const ModsPageActions: React.FunctionComponent<{
       history,
       marketplaceListingUrl,
       modId,
+      editablePackageId,
       name,
       showDeactivate,
       showDelete,

applications/browser-extension/src/extensionConsole/pages/mods/ModsPageSidebar.tsx

@@ -210,7 +210,13 @@ const ModsPageSidebar: React.VoidFunctionComponent<ModsPageSidebarProps> = ({
     if (debouncedSearchInput) {
       setActiveTab(MODS_PAGE_TABS.all);
     }
-  }, [globalFilter, debouncedSearchInput, setActiveTab, setGlobalFilter]);
+  }, [
+    globalFilter,
+    debouncedSearchInput,
+    setActiveTab,
+    setSearchQuery,
+    setGlobalFilter,
+  ]);
 
   return (
     <div className={styles.root}>

applications/browser-extension/src/extensionConsole/pages/mods/gridView/GridView.tsx

@@ -114,7 +114,7 @@ const GridView: React.VoidFunctionComponent<ModsPageContentProps> = ({
   // Re-render the list when expandedRows changes.
   useEffect(() => {
     listRef.current?.resetAfterIndex(0);
-  }, [expandedGridRows, columnCount]);
+  }, [listRef, expandedGridRows, columnCount]);
 
   const GridRow = useCallback(
     ({

applications/browser-extension/src/pageEditor/documentBuilder/preview/ElementPreview.tsx

@@ -111,7 +111,7 @@ const useScrollIntoViewEffect = (elementName: string, isActive: boolean) => {
         scrollIntoView,
       );
     };
-  }, []);
+  }, [elementName, isActive]);
 
   return elementRef;
 };