I have a list: data. Then when I update the list, it renders all the elements again. For example, let's say there are 10 items. One of these has changed. 10 items are rendering again. But since 9 of them are the same, they should not be rendered again. How can I do?
const Item =({item}) => (
<Text>{item.name}</Text>
)
const List = () => {
const [data, setData] = useState([..]);
return (
<FlatList
data={data}
renderItem = {Item}
>
)}
export default List;
You have to use extraData prop of Flatlist
According to docs:
By passing extraData={this.state} to FlatList we make sure FlatList will re-render itself when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.
Or you can implement shouldComponentUpdate inside your renderitem component and place a check when you wanted to render your component.