Improved proximo list performance by using a pure component

This commit is contained in:
keplyx 2020-03-10 17:08:57 +01:00
parent a10d357d8f
commit 651435dfc6
2 changed files with 19 additions and 3 deletions

View file

@ -0,0 +1,17 @@
import * as React from 'react';
import {FlatList} from "react-native";
export default class PureFlatList extends React.PureComponent<Props>{
render() {
return (
<FlatList
data={this.props.data}
keyExtractor={this.props.keyExtractor}
style={{minHeight: 300, width: '100%'}}
renderItem={this.props.renderItem}
/>
);
}
}

View file

@ -5,6 +5,7 @@ import {FlatList, Image, ScrollView, View} from "react-native";
import i18n from "i18n-js"; import i18n from "i18n-js";
import CustomModal from "../../components/CustomModal"; import CustomModal from "../../components/CustomModal";
import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper"; import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
import PureFlatList from "../../components/PureFlatList";
function sortPrice(a, b) { function sortPrice(a, b) {
return a.price - b.price; return a.price - b.price;
@ -313,11 +314,9 @@ class ProximoListScreen extends React.Component<Props, State> {
<CustomModal onRef={this.onModalRef}> <CustomModal onRef={this.onModalRef}>
{this.state.modalCurrentDisplayItem} {this.state.modalCurrentDisplayItem}
</CustomModal> </CustomModal>
<FlatList <PureFlatList
data={this.state.currentlyDisplayedData} data={this.state.currentlyDisplayedData}
extraData={this.state.currentlyDisplayedData}
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
style={{minHeight: 300, width: '100%'}}
renderItem={this.renderItem} renderItem={this.renderItem}
/> />
</View> </View>