Merge pull request #6938 from backstage/freben/memo-entity-list-provider

Memoize the context value in `EntityListProvider`

.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.

.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

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 = <EntityFilters extends DefaultEntityFilters>({
     [],
   );
 
+  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 (
-    <EntityListContext.Provider
-      value={{
-        filters: outputState.appliedFilters,
-        entities: outputState.entities,
-        backendEntities: outputState.backendEntities,
-        updateFilters,
-        queryParameters: outputState.queryParameters,
-        loading,
-        error,
-      }}
-    >
+    <EntityListContext.Provider value={value}>
       {children}
     </EntityListContext.Provider>
   );