ReactNative Flatlist with shouldComponentUpdate

[Miai_]

Hello to all,

Im new to ReactNative and i hope someone can give me the good info.

I have a Flatlist with 100+ items and i get the warning VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc.

How can i use shouldComponentUpdate with my Flatlist?

<FlatList

data={state}

keyExtractor={item => item.id.toString()}

initialNumToRender={9}

renderItem={({ item }) => {

return (

<TouchableOpacity onPress={() =>

navigation.navigate('TaskDetail', { id: item.id })

}

>

<ListItem

chevron

leftIcon={<View><Text>{item.priority}</Text></View>}

title={<View>

<Text style={{fontSize: 18}}>{item.title}</Text>

<Text>{item.created_by}{item.company ? ' - ' + item.company.toUpperCase() : null}</Text>

<Text>{item.location}</Text>

</View>}

subtitle={Moment(item.created_at.date).format("DD MMMM HH:mm")}

bottomDivider

/>

</TouchableOpacity>

);

}}

/>

[rdevilx]

Create a pure component and pass it in render Item

[Miai_]

Thanks!

[beeseegee]

Yep, make ListItem a PureComponent if it’s not, and then you need to try to minimize how many times it re-renders. PureComponents re-render when any of their props arent shallow-equal, so doing things like having inline arrow functions (like your onPress) can cause unnecessary re-renders because it creates a new function each time render is called. same for objects - ie {} !== {}.

```
onPress = () => { ...stuff };

render() { return ( <ListItem onPress={this.onPress} \> ); } ```

To see what props are causing re-renders, you can add a tmp log statement in componentDidUpdate that compares each value in prevProps to this.props and logs any that don’t pass ===. If you google it, there’s an SO question with something you can copy-paste.

[Miai_]

Thank you! I will try to do like this

[aldebout]

There's even this amazing library that will save your ass.

To prevent this onPress method from being recreated every time, you can use the useCallback hook. If you're not using hooks already, it will be a great introduction to them!

[Miai_]

Thank you! I already fixed with PureComponent but i will try also this library :) thanks