From 01c92c417fe04af8ad016a965a22a2f06c7ec55c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= Date: Thu, 15 Feb 2018 09:20:21 +0100 Subject: [PATCH] Improved performance for TransactionsList, remove Defer on Chart in DashboardPage --- src/components/DashboardPage/AccountCard.js | 21 +++---- src/components/DashboardPage/index.js | 60 +++++++++---------- src/components/TransactionsList/index.js | 65 ++++++++++++++------- 3 files changed, 82 insertions(+), 64 deletions(-) diff --git a/src/components/DashboardPage/AccountCard.js b/src/components/DashboardPage/AccountCard.js index 5837847b..b2670992 100644 --- a/src/components/DashboardPage/AccountCard.js +++ b/src/components/DashboardPage/AccountCard.js @@ -9,7 +9,6 @@ import IconCurrencyBitcoin from 'icons/currencies/Bitcoin' import { AreaChart } from 'components/base/Chart' import Bar from 'components/base/Bar' import Box, { Card } from 'components/base/Box' -import Defer from 'components/base/Defer' import FormattedVal from 'components/base/FormattedVal' const AccountCard = ({ @@ -47,17 +46,15 @@ const AccountCard = ({ /> )} - - - + ) diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js index 04910c34..aeb734af 100644 --- a/src/components/DashboardPage/index.js +++ b/src/components/DashboardPage/index.js @@ -25,7 +25,6 @@ import { saveSettings } from 'actions/settings' import { AreaChart } from 'components/base/Chart' import Box, { Card } from 'components/base/Box' import Pills from 'components/base/Pills' -import Defer from 'components/base/Defer' import Text from 'components/base/Text' import TransactionsList from 'components/TransactionsList' @@ -56,6 +55,7 @@ type State = { } const ACCOUNTS_BY_LINE = 3 +const ALL_TRANSACTIONS_LIMIT = 10 const TIMEOUT_REFRESH_DATAS = 5e3 const itemsTimes = [ @@ -92,7 +92,9 @@ const getAllTransactions = accounts => { return result }, []) - return sortBy(allTransactions, t => t.received_at).reverse() + return sortBy(allTransactions, t => t.received_at) + .reverse() + .slice(0, ALL_TRANSACTIONS_LIMIT) } const getAccountsChunk = accounts => { @@ -123,7 +125,7 @@ class DashboardPage extends PureComponent { }) } - if (nextProps.accounts.length !== this.props.accounts.length) { + if (nextProps.accounts !== this.props.accounts) { this.setState({ accountsChunk: getAccountsChunk(nextProps.accounts), allTransactions: getAllTransactions(nextProps.accounts), @@ -192,33 +194,31 @@ class DashboardPage extends PureComponent { - - - { - data.forEach((d, i) => { - res[i] = { - name: d.name, - value: (res[i] ? res[i].value : 0) + d.value, - } - }) - return res - }, []), - 25, - )} - /> - - + + { + data.forEach((d, i) => { + res[i] = { + name: d.name, + value: (res[i] ? res[i].value : 0) + d.value, + } + }) + return res + }, []), + 25, + )} + /> + diff --git a/src/components/TransactionsList/index.js b/src/components/TransactionsList/index.js index 413e40cd..df1f8057 100644 --- a/src/components/TransactionsList/index.js +++ b/src/components/TransactionsList/index.js @@ -1,9 +1,10 @@ // @flow -import React from 'react' +import React, { Component } from 'react' import styled from 'styled-components' import moment from 'moment' import get from 'lodash/get' +import isEqual from 'lodash/isEqual' import type { Transaction as TransactionType } from 'types/common' @@ -118,28 +119,48 @@ type Props = { withAccounts?: boolean, } -const TransactionsList = ({ transactions, withAccounts }: Props) => ( - - - {'Date'} - {withAccounts && {'Account'}} - {'Address'} - - {'Amount'} - - - - - {transactions.map(t => ( - - ))} - - - -) +class TransactionsList extends Component { + static defaultProps = { + withAccounts: false, + } + + componentWillReceiveProps(nextProps: Props) { + if (nextProps.transactions !== this.props.transactions) { + this._hashCache = this.getHashCache(nextProps.transactions) + } + } + + shouldComponentUpdate(nextProps: Props) { + return !isEqual(this._hashCache, this.getHashCache(nextProps.transactions)) + } -TransactionsList.defaultProps = { - withAccounts: false, + getHashCache = (transactions: Array) => transactions.map(t => t.hash) + + _hashCache = this.getHashCache(this.props.transactions) + + render() { + const { transactions, withAccounts } = this.props + + return ( + + + {'Date'} + {withAccounts && {'Account'}} + {'Address'} + + {'Amount'} + + + + + {transactions.map(t => ( + + ))} + + + + ) + } } export default TransactionsList