Greatly improved FlatList performance

This commit is contained in:
Arnaud Vergnet 2020-04-05 11:51:03 +02:00
parent 106227fbbb
commit 7554fb2854
2 changed files with 27 additions and 5 deletions

View file

@ -1,17 +1,17 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Avatar, List, withTheme} from 'react-native-paper'; import {Avatar, Chip, List, withTheme} from 'react-native-paper';
import {View} from "react-native"; import {View} from "react-native";
type Props = { type Props = {
onPress: Function, onPress: Function,
categoryTranslator: Function, categoryTranslator: Function,
chipRender: Function,
item: Object, item: Object,
height: number,
} }
class ClubListItem extends React.PureComponent<Props> { class ClubListItem extends React.Component<Props> {
colors: Object; colors: Object;
hasManagers: boolean; hasManagers: boolean;
@ -22,12 +22,23 @@ class ClubListItem extends React.PureComponent<Props> {
this.hasManagers = props.item.responsibles.length > 0; this.hasManagers = props.item.responsibles.length > 0;
} }
shouldComponentUpdate() {
return false;
}
getCategoriesRender(categories: Array<number | null>) { getCategoriesRender(categories: Array<number | null>) {
let final = []; let final = [];
for (let i = 0; i < categories.length; i++) { for (let i = 0; i < categories.length; i++) {
if (categories[i] !== null){ if (categories[i] !== null){
const category = this.props.categoryTranslator(categories[i]); const category = this.props.categoryTranslator(categories[i]);
final.push(this.props.chipRender(category, this.props.item.id + ':' + category.id)); final.push(
<Chip
style={{marginRight: 5, marginBottom: 5}}
key={this.props.item.id + ':' + category.id}
>
{category.name}
</Chip>
);
} }
} }
return <View style={{flexDirection: 'row'}}>{final}</View>; return <View style={{flexDirection: 'row'}}>{final}</View>;
@ -56,6 +67,10 @@ class ClubListItem extends React.PureComponent<Props> {
icon={this.hasManagers ? "check-circle-outline" : "alert-circle-outline"} icon={this.hasManagers ? "check-circle-outline" : "alert-circle-outline"}
color={this.hasManagers ? this.colors.success : this.colors.primary} color={this.hasManagers ? this.colors.success : this.colors.primary}
/>} />}
style={{
height: this.props.height,
justifyContent: 'center',
}}
/> />
); );
} }

View file

@ -20,6 +20,8 @@ type State = {
currentSearchString: string, currentSearchString: string,
} }
const LIST_ITEM_HEIGHT = 96;
class ClubListScreen extends React.Component<Props, State> { class ClubListScreen extends React.Component<Props, State> {
state = { state = {
@ -86,6 +88,8 @@ class ClubListScreen extends React.Component<Props, State> {
return item.id.toString(); return item.id.toString();
}; };
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
getScreen = (data: Object) => { getScreen = (data: Object) => {
this.categories = data.categories; this.categories = data.categories;
return ( return (
@ -95,6 +99,9 @@ class ClubListScreen extends React.Component<Props, State> {
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
renderItem={this.getRenderItem} renderItem={this.getRenderItem}
ListHeaderComponent={this.getListHeader()} ListHeaderComponent={this.getListHeader()}
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
removeClippedSubviews={true}
getItemLayout={this.itemLayout}
/> />
) )
}; };
@ -163,9 +170,9 @@ class ClubListScreen extends React.Component<Props, State> {
return ( return (
<ClubListItem <ClubListItem
categoryTranslator={this.getCategoryOfId} categoryTranslator={this.getCategoryOfId}
chipRender={this.getChipRender}
item={item} item={item}
onPress={onPress} onPress={onPress}
height={LIST_ITEM_HEIGHT}
/> />
); );
} else } else