CoinList: memoize coinList for performance

This commit is contained in:
Alex Gleason 2021-07-01 19:37:49 -05:00
parent e7d360baae
commit 8961fc1b68
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 24 additions and 10 deletions

View File

@ -4,19 +4,33 @@ import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import CryptoAddress from './crypto_address'; import CryptoAddress from './crypto_address';
import { createSelector } from 'reselect';
const mapStateToProps = (state, ownProps) => { const makeGetCoinList = () => {
return createSelector(
[(addresses, limit) => typeof limit === 'number' ? addresses.take(limit) : addresses],
addresses => addresses,
);
};
const makeMapStateToProps = () => {
const getCoinList = makeGetCoinList();
const mapStateToProps = (state, ownProps) => {
// Address example: // Address example:
// {"ticker": "btc", "address": "bc1q9cx35adpm73aq2fw40ye6ts8hfxqzjr5unwg0n", "note": "This is our main address"} // {"ticker": "btc", "address": "bc1q9cx35adpm73aq2fw40ye6ts8hfxqzjr5unwg0n", "note": "This is our main address"}
const addresses = state.getIn(['soapbox', 'cryptoAddresses']); const addresses = state.getIn(['soapbox', 'cryptoAddresses']);
const { limit } = ownProps; const { limit } = ownProps;
return { return {
coinList: typeof limit === 'number' ? addresses.take(limit) : addresses, coinList: getCoinList(addresses, limit),
}; };
};
return mapStateToProps;
}; };
export default @connect(mapStateToProps) export default @connect(makeMapStateToProps)
class CoinList extends ImmutablePureComponent { class CoinList extends ImmutablePureComponent {
static propTypes = { static propTypes = {