title: React-Native: FlatList re-rendering every single item
body: <p>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.</p>
  <p>The issue is every single is item is rendered when we add to our item array, and sometimes even rendered twice.</p>
  <p>Code is simplified here. /r/reactnative was unable to answer this question.</p>
  <pre><code>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 (
  
  &lt;FlatList
  
  keyExtractor={(item,index) =&gt; index}
  
  scroll
  
  data={this.state.itemsTest}
  
  renderItem={({item, index}) =&gt; &lt;View style={{width: windowWidth}}&gt;&lt;Text&gt;{item}&lt;/Text&gt;&lt;/View&gt;
  
  onEndReached={() =&gt; this.nextItemsTest()}
  
  onEndReachedThreshold={0.2}
  
  &lt;/FlatList&gt;
  )
  }
  
  
  
  
  
  
  
  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) =&gt; ({itemsTest: [...prevState.itemsTest, ...x],}));}
  
  </code></pre>
  <p>Here's the output. Every single item is re-rendered (twice even) every time my state is set.</p>
  <p><strong>I just want to re-render the items that haven't changed. Thank you.</strong></p>
  <p><a href="https://i.stack.imgur.com/GX2Fm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GX2Fm.png" alt="enter image description here" /></a></p>