Memoize data derived from useExtensions

openshift · Mar 16, 2020 · 82add1d · 82add1d
1 parent 3e61f17
commit 82add1d
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 41 deletions.
diff --git a/frontend/packages/console-plugin-sdk/src/registry.ts b/frontend/packages/console-plugin-sdk/src/registry.ts
@@ -27,7 +27,6 @@ import {
   isReduxReducer,
   isResourceDetailsPage,
   isResourceListPage,
-  isResourceTabPage,
   isRoutePage,
   isYAMLTemplate,
 } from './typings';
@@ -87,10 +86,6 @@ export class ExtensionRegistry {
     return this.extensions.filter(isRoutePage);
   }
 
-  public getResourceTabPages() {
-    return this.extensions.filter(isResourceTabPage);
-  }
-
   public getPerspectives() {
     return this.extensions.filter(isPerspective);
   }

diff --git a/frontend/public/components/factory/details.tsx b/frontend/public/components/factory/details.tsx
@@ -25,30 +25,37 @@ import { breadcrumbsForDetailsPage } from '../utils/breadcrumbs';
 
 export const DetailsPage = withFallback<DetailsPageProps>(({ pages = [], ...props }) => {
   const resourceKeys = _.map(props.resources, 'prop');
+
+  const renderAsyncComponent = (page: ResourceTabPage, pageProps: DetailsPageProps) => (
+    <AsyncComponent
+      loader={page.properties.loader}
+      namespace={pageProps.namespace}
+      name={pageProps.name}
+      kind={pageProps.kind}
+      match={pageProps.match}
+    />
+  );
+
   const resourcePageExtensions = useExtensions<ResourceTabPage>(isResourceTabPage);
-  let allPages = [
-    ...pages,
-    ...resourcePageExtensions
-      .filter(
-        (p) =>
-          referenceForModel(p.properties.model) ===
-          (props.kindObj ? referenceFor(props.kindObj) : props.kind),
-      )
-      .map((p) => ({
-        href: p.properties.href,
-        name: p.properties.name,
-        component: () => (
-          <AsyncComponent
-            loader={p.properties.loader}
-            namespace={props.namespace}
-            name={props.name}
-            kind={props.kind}
-            match={props.match}
-          />
-        ),
-      })),
-  ];
+  const pluginPages = React.useMemo(
+    () =>
+      resourcePageExtensions
+        .filter(
+          (p) =>
+            referenceForModel(p.properties.model) ===
+            (props.kindObj ? referenceFor(props.kindObj) : props.kind),
+        )
+        .map((p) => ({
+          href: p.properties.href,
+          name: p.properties.name,
+          component: () => renderAsyncComponent(p, props),
+        })),
+    [resourcePageExtensions, props],
+  );
+
+  let allPages = [...pages, ...pluginPages];
   allPages = allPages.length ? allPages : null;
+
   return (
     <Firehose
       resources={[

diff --git a/frontend/public/components/nav/perspective-nav.tsx b/frontend/public/components/nav/perspective-nav.tsx
@@ -13,8 +13,11 @@ type StateProps = {
 };
 
 const PerspectiveNav: React.FC<StateProps> = ({ perspective }) => {
-  const navItemExtensions = useExtensions<NavItem>(isNavItem).filter(
-    (item) => item.properties.perspective === perspective,
+  const navItemExtensions = useExtensions<NavItem>(isNavItem);
+
+  const matchingNavItems = React.useMemo(
+    () => navItemExtensions.filter((item) => item.properties.perspective === perspective),
+    [navItemExtensions, perspective],
   );
 
   // Until admin perspective is contributed through extensions, simply render static `AdminNav`
@@ -28,7 +31,7 @@ const PerspectiveNav: React.FC<StateProps> = ({ perspective }) => {
   return (
     <>
       {_.compact(
-        navItemExtensions.map((item) => {
+        matchingNavItems.map((item) => {
           const { section } = item.properties;
           if (section) {
             if (renderedSections.includes(section)) {

diff --git a/frontend/public/components/utils/horizontal-nav.tsx b/frontend/public/components/utils/horizontal-nav.tsx
@@ -206,19 +206,24 @@ export const HorizontalNav = React.memo((props: HorizontalNavProps) => {
     {},
   );
 
-  const navTabExtensions = useExtensions<HorizontalNavTab>(isHorizontalNavTab).filter(
-    (tab) =>
-      props.obj?.data && referenceForModel(tab.properties.model) === referenceFor(props.obj.data),
-  );
-  const pages = (props.pages || props.pagesFor(props.obj?.data)).concat(
-    navTabExtensions.map((tab) => ({
-      ...tab.properties.page,
-      component: (params: PageComponentProps) => (
-        <AsyncComponent {...params} loader={tab.properties.loader} />
-      ),
-    })),
+  const objReference = props.obj?.data ? referenceFor(props.obj.data) : '';
+  const navTabExtensions = useExtensions<HorizontalNavTab>(isHorizontalNavTab);
+
+  const pluginPages = React.useMemo(
+    () =>
+      navTabExtensions
+        .filter((tab) => referenceForModel(tab.properties.model) === objReference)
+        .map((tab) => ({
+          ...tab.properties.page,
+          component: (params: PageComponentProps) => (
+            <AsyncComponent {...params} loader={tab.properties.loader} />
+          ),
+        })),
+    [navTabExtensions, objReference],
   );
 
+  const pages = (props.pages || props.pagesFor(props.obj?.data)).concat(pluginPages);
+
   const routes = pages.map((p) => {
     const path = `${props.match.url}/${p.path || p.href}`;
     const render = (params) => {