diff --git a/.changeset/small-emus-sin.md b/.changeset/small-emus-sin.md new file mode 100644 index 0000000000..e5683d18f9 --- /dev/null +++ b/.changeset/small-emus-sin.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Fix `EntityListProvider` to not update url if unmounted diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx index 8ca3efd243..2506b55d6d 100644 --- a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx +++ b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx @@ -25,7 +25,7 @@ import React, { useState, } from 'react'; import { useSearchParams } from 'react-router-dom'; -import { useAsyncFn, useDebounce } from 'react-use'; +import { useAsyncFn, useDebounce, useMountedState } from 'react-use'; import { catalogApiRef } from '../api'; import { EntityKindFilter, @@ -102,6 +102,7 @@ type OutputState = { export const EntityListProvider = ({ children, }: PropsWithChildren<{}>) => { + const isMounted = useMountedState(); const catalogApi = useApi(catalogApiRef); const [searchParams, setSearchParams] = useSearchParams(); const allQueryParams = qs.parse(searchParams.toString()); @@ -164,12 +165,14 @@ export const EntityListProvider = ({ }); } - setSearchParams( - qs.stringify({ ...allQueryParams, filters: queryParams }), - { - replace: true, - }, - ); + if (isMounted()) { + setSearchParams( + qs.stringify({ ...allQueryParams, filters: queryParams }), + { + replace: true, + }, + ); + } }, [catalogApi, requestedFilters, outputState], { loading: true },