From 94953371c6f449047a7aad6c4babeb095945e486 Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Sat, 11 Apr 2020 13:12:20 +0200
Subject: [PATCH] perf(ui): useMemo for filtering & sorting

---
 .../components/bundle-assets/bundle-assets.jsx | 10 ++++++----
 .../bundle-chunk-modules.jsx                   | 12 ++++++++----
 .../bundle-packages/bundle-packages.jsx        |  7 ++++---
 packages/ui/src/hocs/with-custom-sort.jsx      |  8 ++++++--
 packages/ui/src/hocs/with-filtered-items.jsx   | 18 +++++++++++-------
 5 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.jsx b/packages/ui/src/components/bundle-assets/bundle-assets.jsx
index 1a4c42455a..74863558c3 100644
--- a/packages/ui/src/components/bundle-assets/bundle-assets.jsx
+++ b/packages/ui/src/components/bundle-assets/bundle-assets.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { get, map } from 'lodash';
@@ -149,9 +149,11 @@ export const BundleAssets = (props) => {
     updateSearch('');
   };
 
-  const emptyMessage = (
-    <EmptySet resources="assets" filtered={totalRowCount !== 0} resetFilters={clearSearch} />
+  const emptyMessage = useMemo(
+    () => <EmptySet resources="assets" filtered={totalRowCount !== 0} resetFilters={clearSearch} />,
+    [],
   );
+  const renderRowHeader = useMemo(() => getRenderRowHeader(map(jobs, 'label')), []);
 
   return (
     <section className={cx(css.root, className)}>
@@ -214,7 +216,7 @@ export const BundleAssets = (props) => {
         <MetricsTable
           runs={jobs}
           items={items}
-          renderRowHeader={getRenderRowHeader(map(jobs, 'label'))}
+          renderRowHeader={renderRowHeader}
           emptyMessage={emptyMessage}
           showHeaderSum
         />
diff --git a/packages/ui/src/components/bundle-chunk-modules/bundle-chunk-modules.jsx b/packages/ui/src/components/bundle-chunk-modules/bundle-chunk-modules.jsx
index 1a1167aebd..c15fdc091b 100644
--- a/packages/ui/src/components/bundle-chunk-modules/bundle-chunk-modules.jsx
+++ b/packages/ui/src/components/bundle-chunk-modules/bundle-chunk-modules.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { map } from 'lodash';
@@ -59,8 +59,12 @@ export const BundleChunkModules = ({
     updateSearch('');
   };
 
-  const emptyMessage = (
-    <EmptySet resources="modules" filtered={totalRowCount !== 0} resetFilters={clearSearch} />
+  const renderRowHeader = useMemo(() => getRenderRowHeader(map(runs, 'label')), []);
+  const emptyMessage = useMemo(
+    () => (
+      <EmptySet resources="modules" filtered={totalRowCount !== 0} resetFilters={clearSearch} />
+    ),
+    [],
   );
 
   return (
@@ -112,7 +116,7 @@ export const BundleChunkModules = ({
           className={css.table}
           items={items}
           runs={runs}
-          renderRowHeader={getRenderRowHeader(map(runs, 'label'))}
+          renderRowHeader={renderRowHeader.current}
           emptyMessage={emptyMessage}
           showHeaderSum
         />
diff --git a/packages/ui/src/components/bundle-packages/bundle-packages.jsx b/packages/ui/src/components/bundle-packages/bundle-packages.jsx
index 2aadf4c44b..4463ee720e 100644
--- a/packages/ui/src/components/bundle-packages/bundle-packages.jsx
+++ b/packages/ui/src/components/bundle-packages/bundle-packages.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
@@ -32,8 +32,9 @@ export const BundlePackages = (props) => {
     updateSearch('');
   };
 
-  const emptyMessage = (
-    <EmptySet resources="packages" filtered={totalRowCount !== 0} resetFilters={clear} />
+  const emptyMessage = useMemo(
+    () => <EmptySet resources="packages" filtered={totalRowCount !== 0} resetFilters={clear} />,
+    [],
   );
 
   return (
diff --git a/packages/ui/src/hocs/with-custom-sort.jsx b/packages/ui/src/hocs/with-custom-sort.jsx
index 345cec6bd9..11259bca6d 100644
--- a/packages/ui/src/hocs/with-custom-sort.jsx
+++ b/packages/ui/src/hocs/with-custom-sort.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { orderBy } from 'lodash';
 
@@ -11,7 +11,11 @@ export const withCustomSort = ({
   const WithCustomSort = (props) => {
     const { items } = props;
     const [sort, updateSort] = useState({ sortBy, direction });
-    const orderedItems = orderBy(items, getCustomSort(sort.sortBy), sort.direction);
+    const orderedItems = useMemo(() => orderBy(items, getCustomSort(sort.sortBy), sort.direction), [
+      items,
+      sort.sortBy,
+      sort.direction,
+    ]);
 
     const otherProps = {
       sort,
diff --git a/packages/ui/src/hocs/with-filtered-items.jsx b/packages/ui/src/hocs/with-filtered-items.jsx
index 826c477069..0a20e23f0c 100644
--- a/packages/ui/src/hocs/with-filtered-items.jsx
+++ b/packages/ui/src/hocs/with-filtered-items.jsx
@@ -1,17 +1,21 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 export const withFilteredItems = (getFilter) => (BaseComponent) => {
   const WithFilteredItems = (props) => {
     const { items, filters, searchPattern } = props;
 
-    const filteredItems = items.filter((item) => {
-      if (searchPattern && !searchPattern.test(item?.key)) {
-        return false;
-      }
+    const filteredItems = useMemo(
+      () =>
+        items.filter((item) => {
+          if (searchPattern && !searchPattern.test(item?.key)) {
+            return false;
+          }
 
-      return getFilter(filters)(item);
-    });
+          return getFilter(filters)(item);
+        }),
+      [items, searchPattern, filters],
+    );
 
     const baseProps = {
       items: filteredItems,