React-Native: FlatList re-rendering every single item

Question

So I have a FlatList that gets fed an array of items. When I scroll to the bottom, I append more items to the end of that array and show to the user.

The issue is every single is item is rendered when we add to our item array, and sometimes even rendered twice.

Code is simplified here. /r/reactnative was unable to answer this question.

constructor(props) {
super(props);
this.state = {itemsTest: ['A', 'A', 'A', 'A']}
}

render() {


// Key is fine, since none of my items are changing indexes. I am just adding new items.
return (

<FlatList

keyExtractor={(item,index) => index}

scroll

data={this.state.itemsTest}

renderItem={({item, index}) => <View style={{width: windowWidth}}><Text>{item}</Text></View>

onEndReached={() => this.nextItemsTest()}

onEndReachedThreshold={0.2}

</FlatList>
)
}







nextItemsTest() {

// From suggestions below, just add an element to this array.

console.log('nextItemsTest');

const x = ['A'];

// Have worked with many variations of setting state here. I don't think this is the issue.
this.setState((prevState) => ({itemsTest: [...prevState.itemsTest, ...x],}));}

Here's the output. Every single item is re-rendered (twice even) every time my state is set.

I just want to re-render the items that haven't changed. Thank you.

Answer 1

Instead of Using View directly in your flatlist render you can create another component which is a pure component. so it will only re-renders when its data changes . eg For your case it re-renders each item only once.

here is the solution

1st create a pure component like this

 class SmartView extends PureComponent { render() { const {item, index} = this.props; return ( <View style={{height: 300}}> {console.log('rendering', index)} <Text>{item}</Text> </View> ); } }

and then replace View with SmartView in your flatlist like this

 <FlatList keyExtractor={(item, index) => index.toString()} data={this.state.itemsTest} renderItem={({item, index}) => <SmartView item= {item} index={index} />} onEndReached={() => this.nextItemsTest()} onEndReachedThreshold={0.2} />