FIX: fix wallet/transaction perfomance

potmarion · Jun 30, 2020 · ce23009 · ce23009
1 parent 5fbd52d
commit ce23009
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 17 deletions.
diff --git a/BlueComponents.js b/BlueComponents.js
@@ -1421,14 +1421,17 @@ export class NewWalletPanel extends Component {
   }
 }
 
-export const BlueTransactionListItem = ({ item, itemPriceUnit = BitcoinUnit.BTC, shouldRefresh }) => {
-  const [transactionTimeToReadable, setTransactionTimeToReadable] = useState('...');
+export const BlueTransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUnit.BTC }) => {
   const [subtitleNumberOfLines, setSubtitleNumberOfLines] = useState(1);
 
+  // re-render component every one minute
+  const [tick, setTick] = useState(0);
   useEffect(() => {
-    const transactionTimeToReadable = loc.transactionTimeToReadable(item.received);
-    return setTransactionTimeToReadable(transactionTimeToReadable);
-  }, [item, itemPriceUnit, shouldRefresh]);
+    const id = setInterval(() => setTick(tick + 1), 60000);
+    return () => clearInterval(id);
+  }, [tick]);
+
+  const transactionTimeToReadable = loc.transactionTimeToReadable(item.received);
 
   const txMemo = () => {
     if (BlueApp.tx_metadata[item.hash] && BlueApp.tx_metadata[item.hash].memo) {
@@ -1604,7 +1607,7 @@ export const BlueTransactionListItem = ({ item, itemPriceUnit = BitcoinUnit.BTC,
       rightTitleStyle={rowTitleStyle()}
     />
   );
-};
+});
 
 export class BlueListTransactionItem extends Component {
   static propTypes = {

diff --git a/screen/wallets/transactions.js b/screen/wallets/transactions.js
@@ -222,16 +222,12 @@ export default class WalletTransactions extends Component {
       dataSource: this.getTransactions(15),
       limit: 15,
       pageSize: 20,
-      timeElapsed: 0, // this is to force a re-render for FlatList items.
     };
   }
 
   componentDidMount() {
     this._unsubscribeFocus = this.props.navigation.addListener('focus', this.onFocus);
     this.props.navigation.setParams({ isLoading: false });
-    this.interval = setInterval(() => {
-      this.setState(prev => ({ timeElapsed: prev.timeElapsed + 1 }));
-    }, 60000);
     HandoffSettings.isHandoffUseEnabled().then(enabled => this.setState({ isHandOffUseEnabled: enabled }));
     this.setState({ isLoading: false });
   }
@@ -541,7 +537,6 @@ export default class WalletTransactions extends Component {
   };
 
   componentWillUnmount() {
-    clearInterval(this.interval);
     this._unsubscribeFocus();
   }
 
@@ -557,11 +552,7 @@ export default class WalletTransactions extends Component {
   renderItem = item => {
     return (
       <View style={styles.item}>
-        <BlueTransactionListItem
-          item={item.item}
-          itemPriceUnit={this.state.wallet.getPreferredBalanceUnit()}
-          shouldRefresh={this.state.timeElapsed}
-        />
+        <BlueTransactionListItem item={item.item} itemPriceUnit={this.state.wallet.getPreferredBalanceUnit()} />
       </View>
     );
   };
@@ -747,7 +738,6 @@ export default class WalletTransactions extends Component {
             refreshControl={
               <RefreshControl onRefresh={() => this.refreshTransactions()} refreshing={this.state.showShowFlatListRefreshControl} />
             }
-            extraData={this.state.dataSource}
             data={this.state.dataSource}
             keyExtractor={this._keyExtractor}
             renderItem={this.renderItem}