title: React Native FlatList re-renders the already rendered items when adding new data
body: <p>I have implemented a code that listen my DB documents and when a new one is added the app renders it as an item on my FlatList.</p>
  <p>The problem I have is that everytime I update the data of the FlatList, the already rendered items re-renders again and again...</p>
  <p>As my original code is complex, I have build a Snack:
  <a href="https://snack.expo.io/@victoriomolina/flatlist-re-renders-all-components" rel="nofollow noreferrer">https://snack.expo.io/@victoriomolina/flatlist-re-renders-all-components</a></p>
  <p>I think the problem is that I update the state using a shallow copy of the existing array, but I do it just to re-render the FlatList when new items are added <em>(I don't want to re-render the already rendered items)</em>.</p>
  <p>Thank you, I will really appreciate your help.</p>
  <p>Pd: In my original code the components of the FlatList extends React.PureComponent</p>
  <h2>My Real Code</h2>
  <p>The fething part</p>
  <pre><code>  const [posts, setPosts] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
  
    useEffect(() =&gt; {
      const { firebase } = props;
  
      let postsArray = [];
  
      // Realtime database listener
      const unsuscribe = firebase
        .getDatabase()
        .collection(&quot;posts&quot;)
        .doc(firebase.getCurrentUser().uid)
        .collection(&quot;userPosts&quot;)
        .orderBy(&quot;date&quot;) // Sorted by upload date
        .onSnapshot((snapshot) =&gt; {
          let changes = snapshot.docChanges();
  
          changes.forEach((change) =&gt; {
            if (change.type === &quot;added&quot;) {
              // Get the new post
              const newPost = change.doc.data();
  
              // Add the new post to the posts list
              postsArray.unshift(newPost);
            }
          });
  
          // Reversed order so that the last post is at the top of the list
          setPosts([...postsArray]); // Shallow copy of the existing array -&gt; Re-render when new posts added
          setIsLoading(false);
        });
  
      /* Pd: At the first time, this function will get all the user's posts */
  
      return () =&gt; {
        // Detach the listening agent
        unsuscribe();
      };
    }, []);
  </code></pre>
  <p>The FlatList</p>
  <pre><code>     &lt;FlatList
            data={data}
            keyExtractor={keyExtractor}
            legacyImplementation={false}
            numColumns={1}
            renderItem={this.renderItem}
            getItemLayout={this.getItemLayout}
            initialNumToRender={12}
            windowSize={40}
            maxToRenderPerBatch={15}
            updateCellsBatchingPeriod={50}
            removeClippedSubviews
            ListFooterComponent={this.renderFooter()}
          /&gt;
  </code></pre>
  <p>The render item method</p>
  <pre><code>renderItem = ({ item, index }) =&gt; {
      const {
        images,
        dimensions,
        description,
        location,
        likes,
        comments,
        date,
      } = item;
  
      return (
        &lt;View
          key={index}
          onLayout={({ nativeEvent }) =&gt; {
            this.itemHeights[index] = nativeEvent.layout.height;
          }}
        &gt;
          &lt;Card { /* Extends React.PureComponent */ }
            images={images}
            postDimensions={dimensions}
            description={description}
            location={location}
            likes={likes}
            comments={comments}
            date={date}
          /&gt;
        &lt;/View&gt;
      );
    };
  </code></pre>