diff --git a/applications/browser-extension/.eslintrc.js b/applications/browser-extension/.eslintrc.js index 0a951ed410..4727cad38d 100644 --- a/applications/browser-extension/.eslintrc.js +++ b/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", { diff --git a/applications/browser-extension/src/components/ConfirmationModal.stories.tsx b/applications/browser-extension/src/components/ConfirmationModal.stories.tsx index cf85a22d2f..93ee9290b4 100644 --- a/applications/browser-extension/src/components/ConfirmationModal.stories.tsx +++ b/applications/browser-extension/src/components/ConfirmationModal.stories.tsx @@ -15,7 +15,7 @@ * along with this program. If not, see . */ -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 ( + { + await showConfirmation({ + title, + message, + submitCaption, + cancelCaption, + }); - // Do any action here if confirm === true - }, [showConfirmation]); - return Confirm Modal; + // Do any action here if confirm === true + }} + > + Confirm Modal + + ); }; const Template: Story = (args) => { diff --git a/applications/browser-extension/src/extensionConsole/pages/mods/ModsPageActions.tsx b/applications/browser-extension/src/extensionConsole/pages/mods/ModsPageActions.tsx index 606dabb664..c3816086c4 100644 --- a/applications/browser-extension/src/extensionConsole/pages/mods/ModsPageActions.tsx +++ b/applications/browser-extension/src/extensionConsole/pages/mods/ModsPageActions.tsx @@ -203,6 +203,7 @@ const ModsPageActions: React.FunctionComponent<{ history, marketplaceListingUrl, modId, + editablePackageId, name, showDeactivate, showDelete, diff --git a/applications/browser-extension/src/extensionConsole/pages/mods/ModsPageSidebar.tsx b/applications/browser-extension/src/extensionConsole/pages/mods/ModsPageSidebar.tsx index 4fdd08fec1..2ec935a667 100644 --- a/applications/browser-extension/src/extensionConsole/pages/mods/ModsPageSidebar.tsx +++ b/applications/browser-extension/src/extensionConsole/pages/mods/ModsPageSidebar.tsx @@ -210,7 +210,13 @@ const ModsPageSidebar: React.VoidFunctionComponent = ({ if (debouncedSearchInput) { setActiveTab(MODS_PAGE_TABS.all); } - }, [globalFilter, debouncedSearchInput, setActiveTab, setGlobalFilter]); + }, [ + globalFilter, + debouncedSearchInput, + setActiveTab, + setSearchQuery, + setGlobalFilter, + ]); return (
diff --git a/applications/browser-extension/src/extensionConsole/pages/mods/gridView/GridView.tsx b/applications/browser-extension/src/extensionConsole/pages/mods/gridView/GridView.tsx index 5f207ee16d..6db20d9fa3 100644 --- a/applications/browser-extension/src/extensionConsole/pages/mods/gridView/GridView.tsx +++ b/applications/browser-extension/src/extensionConsole/pages/mods/gridView/GridView.tsx @@ -114,7 +114,7 @@ const GridView: React.VoidFunctionComponent = ({ // Re-render the list when expandedRows changes. useEffect(() => { listRef.current?.resetAfterIndex(0); - }, [expandedGridRows, columnCount]); + }, [listRef, expandedGridRows, columnCount]); const GridRow = useCallback( ({ diff --git a/applications/browser-extension/src/pageEditor/documentBuilder/preview/ElementPreview.tsx b/applications/browser-extension/src/pageEditor/documentBuilder/preview/ElementPreview.tsx index be434711f9..d525335cf2 100644 --- a/applications/browser-extension/src/pageEditor/documentBuilder/preview/ElementPreview.tsx +++ b/applications/browser-extension/src/pageEditor/documentBuilder/preview/ElementPreview.tsx @@ -111,7 +111,7 @@ const useScrollIntoViewEffect = (elementName: string, isActive: boolean) => { scrollIntoView, ); }; - }, []); + }, [elementName, isActive]); return elementRef; };