Memoize DataView deps (aragon#995)

* Transfers: memoize sorted transfers * Transfers: update code format * Transfers: memoize sorted transfers * Transfers: update code format * Holders: memoize holders * Transfers: remove react namespace from method Co-Authored-By: Pierre Bertet <hello@pierre.world>
MickdeGraaf · Sep 17, 2019 · 2d86fa4 · 2d86fa4
1 parent 59f29e5
commit 2d86fa4
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/app/src/screens/Holders.js b/app/src/screens/Holders.js
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useMemo, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import BN from 'bn.js'
 import { useConnectedAccount } from '@aragon/api-react'
@@ -34,13 +34,18 @@ function Holders({
   tokenTransfersEnabled,
 }) {
   const connectedAccount = useConnectedAccount()
+  const mappedEntries = useMemo(
+    () => holders.map(({ address, balance }) => [address, balance]),
+    [holders]
+  )
+
   return (
     <Split
       primary={
         <DataView
           mode="table"
           fields={groupMode ? ['Owner'] : ['Holder', 'Balance']}
-          entries={holders.map(({ address, balance }) => [address, balance])}
+          entries={mappedEntries}
           renderEntry={([address, balance]) => {
             const isCurrentUser = addressesEqual(address, connectedAccount)