How to prevent re-rendering of FlatList

[pgwzzz]

Hello.

I'm implementing chatting with FlatList.

Every time there is a new chat message detected, I do the following.

let newItem = {...}; // read a new chat message from server
let nextFlatListData = this.state.flatListData.slice(0); // clone the chat list
nextFlatListData.push(newItem); // add the new chat to the list
this.setState({flatListData: nextFlatListData}); // update FlatList

It seems that it re-renders every row.

I just need the row for newItem is rendered and the others are NOT re-rendered.

Thank you very much.

[PatNeedham]

@pgwzzz can you share the renderItem prop you're using for your Flatlist? Including a key property as part of all the objects in the array you use for the FlatList (or a keyExtractor prop) is necessary to prevent re-renders.

[marcesengel]

Also you could try using a PureComponent or implement an own shouldComponentUpdate for your items. Your old components will be passed the same props again (if your old messages don't change), so they won't rerender if you use a PureComponent.

[pull-bot]

@facebook-github-bot no-template

[facebook-github-bot]

Hey, thanks for reporting this issue! It looks like your description is missing some necessary information, or the list of reproduction steps is not complete. Can you please add all the details specified in the Issue Template? This is necessary for people to be able to understand and reproduce the issue being reported. I am going to close this, but feel free to open a new issue with the additional information provided. Thanks! See "What to Expect from Maintainers" to learn more.