perf(ui): useMemo for filtering & sorting

relative-ci · Apr 11, 2020 · 9495337 · 9495337
1 parent 36b2f7b
commit 9495337
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,