diff --git a/.changeset/lemon-dogs-switch.md b/.changeset/lemon-dogs-switch.md new file mode 100644 index 0000000000..aa86e3c2b0 --- /dev/null +++ b/.changeset/lemon-dogs-switch.md @@ -0,0 +1,14 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Memoize the context value in `EntityListProvider`. + +This removes quite a few unnecessary rerenders of the inner components. + +When running the full `CatalogPage` test: + +- Before: 98 table render calls total, 16 seconds runtime +- After: 57 table render calls total, 14 seconds runtime + +This doesn't account for all of the slowness, but does give a minor difference in perceived speed in the browser too. diff --git a/.github/styles/vocab.txt b/.github/styles/vocab.txt index 57510f2c3f..dd9224fc84 100644 --- a/.github/styles/vocab.txt +++ b/.github/styles/vocab.txt @@ -142,6 +142,7 @@ maintainership makefile md memcache +memoize memoized microservice microservices @@ -215,6 +216,7 @@ repo Repo repos rerender +rerenders Reusability reusability roadmaps diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx index 54d2fdcd47..d5c4668079 100644 --- a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx +++ b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx @@ -22,6 +22,7 @@ import React, { PropsWithChildren, useCallback, useContext, + useMemo, useState, } from 'react'; import { useSearchParams } from 'react-router-dom'; @@ -197,18 +198,29 @@ export const EntityListProvider = ({ [], ); + const value = useMemo( + () => ({ + filters: outputState.appliedFilters, + entities: outputState.entities, + backendEntities: outputState.backendEntities, + updateFilters, + queryParameters: outputState.queryParameters, + loading, + error, + }), + [ + outputState.appliedFilters, + outputState.entities, + outputState.backendEntities, + updateFilters, + outputState.queryParameters, + loading, + error, + ], + ); + return ( - + {children} );