feat(neuron-ui): memorize lists for performance

memorize the lists of transactions and addresses.
nervosnetwork · Aug 14, 2019 · 07c8667 · 07c8667
1 parent 7d2b5b8
commit 07c8667
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 53 deletions.
diff --git a/packages/neuron-ui/src/components/Addresses/index.tsx b/packages/neuron-ui/src/components/Addresses/index.tsx
@@ -158,20 +158,24 @@ const Addresses = ({
       semanticColors,
     ]
   )
-
-  return (
-    <ShimmeredDetailsList
-      enableShimmer={isLoading}
-      checkboxVisibility={CheckboxVisibility.hidden}
-      columns={addressColumns.map(col => ({ ...col, name: t(col.name) }))}
-      items={addresses}
-      onItemContextMenu={item => {
-        contextMenu({ type: 'addressList', id: item.identifier })
-      }}
-      className="listWithDesc"
-      onRenderRow={onRenderRow}
-    />
+  const List = useMemo(
+    () => (
+      <ShimmeredDetailsList
+        enableShimmer={isLoading}
+        checkboxVisibility={CheckboxVisibility.hidden}
+        columns={addressColumns.map(col => ({ ...col, name: t(col.name) }))}
+        items={addresses}
+        onItemContextMenu={item => {
+          contextMenu({ type: 'addressList', id: item.identifier })
+        }}
+        className="listWithDesc"
+        onRenderRow={onRenderRow}
+      />
+    ),
+    [isLoading, addressColumns, addresses, t]
   )
+
+  return List
 }
 
 Addresses.displayName = 'Addresses'

diff --git a/packages/neuron-ui/src/components/History/index.tsx b/packages/neuron-ui/src/components/History/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { Stack, SearchBox } from 'office-ui-fabric-react'
@@ -33,47 +33,65 @@ const History = ({
   }, [id, history])
   const onSearch = useCallback(() => history.push(`${Routes.History}?keywords=${keywords}`), [history, keywords])
 
-  return (
-    <Stack>
-      <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: 15 }}>
-        <SearchBox
-          value={keywords}
-          styles={{ root: { width: 500 } }}
-          placeholder={t('history.search.placeholder')}
-          onChange={onKeywordsChange}
-          onSearch={onSearch}
-          iconProps={{ iconName: 'Search', styles: { root: { height: '18px' } } }}
+  const List = useMemo(() => {
+    return (
+      <Stack>
+        <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: 15 }}>
+          <SearchBox
+            value={keywords}
+            styles={{ root: { width: 500 } }}
+            placeholder={t('history.search.placeholder')}
+            onChange={onKeywordsChange}
+            onSearch={onSearch}
+            iconProps={{ iconName: 'Search', styles: { root: { height: '18px' } } }}
+          />
+        </Stack>
+        <TransactionList
+          isLoading={isLoading}
+          isUpdatingDescription={isUpdatingDescription}
+          walletID={id}
+          items={items}
+          dispatch={dispatch}
+        />
+        <Pagination
+          selectedPageIndex={pageNo - 1}
+          pageCount={Math.ceil(totalCount / pageSize)}
+          itemsPerPage={pageSize}
+          totalItemCount={totalCount}
+          previousPageAriaLabel={t('pagination.previous-page')}
+          nextPageAriaLabel={t('pagination.next-page')}
+          firstPageAriaLabel={t('pagination.first-page')}
+          lastPageAriaLabel={t('pagination.last-page')}
+          pageAriaLabel={t('pagination-page')}
+          selectedAriaLabel={t('pagination-selected')}
+          firstPageIconProps={{ iconName: 'FirstPage' }}
+          previousPageIconProps={{ iconName: 'PrevPage' }}
+          nextPageIconProps={{ iconName: 'NextPage' }}
+          lastPageIconProps={{ iconName: 'LastPage' }}
+          format="buttons"
+          onPageChange={(idx: number) => {
+            history.push(`${Routes.History}?pageNo=${idx + 1}`)
+          }}
         />
       </Stack>
-      <TransactionList
-        isLoading={isLoading}
-        isUpdatingDescription={isUpdatingDescription}
-        walletID={id}
-        items={items}
-        dispatch={dispatch}
-      />
-      <Pagination
-        selectedPageIndex={pageNo - 1}
-        pageCount={Math.ceil(totalCount / pageSize)}
-        itemsPerPage={pageSize}
-        totalItemCount={totalCount}
-        previousPageAriaLabel={t('pagination.previous-page')}
-        nextPageAriaLabel={t('pagination.next-page')}
-        firstPageAriaLabel={t('pagination.first-page')}
-        lastPageAriaLabel={t('pagination.last-page')}
-        pageAriaLabel={t('pagination-page')}
-        selectedAriaLabel={t('pagination-selected')}
-        firstPageIconProps={{ iconName: 'FirstPage' }}
-        previousPageIconProps={{ iconName: 'PrevPage' }}
-        nextPageIconProps={{ iconName: 'NextPage' }}
-        lastPageIconProps={{ iconName: 'LastPage' }}
-        format="buttons"
-        onPageChange={(idx: number) => {
-          history.push(`${Routes.History}?pageNo=${idx + 1}`)
-        }}
-      />
-    </Stack>
-  )
+    )
+  }, [
+    keywords,
+    onKeywordsChange,
+    onSearch,
+    isLoading,
+    isUpdatingDescription,
+    id,
+    items,
+    dispatch,
+    pageNo,
+    totalCount,
+    pageSize,
+    history,
+    t,
+  ])
+
+  return List
 }
 
 History.displayName = 'History'