title: react native FlatList re-renders when elements have been added to the array state
body: <p>When I want to change the array state all of the elements in the FlatList gets re-rendered. I have checked other questions with the same problem but nope I wasn't able to solve it. First, the issue was in my main project but because I wasn't able to solve it I created a clear project with the example I gave below but still, the issue persists.
  On the main project, KeyExtractor was returning a unique id.</p>
  <pre><code>import React, { useEffect, useState, memo } from 'react';
  import { FlatList, StyleSheet, Text, View } from 'react-native';
  
  export default function App() {
    const [data, setData] = useState([...Array(5).keys()])
  
    useEffect(() =&gt; {
      setInterval(() =&gt; {
        console.log(&quot;----------&quot;)
        setData(oldArray =&gt; [...oldArray, Math.ceil(Math.random() * 5000)])
      }, 2000)
    }, [])
  
    const RenderItem = memo(({ item }: { item: number }) =&gt; {
      return (
        &lt;View&gt;
          { console.log(&quot;render&quot;, item) }
          &lt;Text&gt;{ item }&lt;/Text&gt;
        &lt;/View&gt;
      )
    })
  
    const renderItemHandler = ({ item }: { item: number }) =&gt; {
      return &lt;RenderItem item={item} /&gt;
    }
  
    const keyExtractor = (item: number) =&gt; item.toString();
    return (
      &lt;View style={styles.container}&gt;
        &lt;FlatList
          style={{ width: 100, backgroundColor: &quot;#7132a8&quot; }}
          data={data}
          renderItem={renderItemHandler}
          keyExtractor={keyExtractor}
        /&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  </code></pre>
  <p><a href="https://snack.expo.dev/@sibyl/flatlist-issue" rel="nofollow noreferrer">https://snack.expo.dev/@sibyl/flatlist-issue</a></p>
  <p>The screenshot from the React DevTools
  <a href="https://i.stack.imgur.com/cJsB0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cJsB0.png" alt="Re render example" /></a></p>
  <p><strong>UPDATE</strong></p>
  <p>Updated code to use memo</p>
  <p><strong>UPDATE</strong>
  Solved it by moving components that use memo to outside of app function</p>
  <pre><code>const RenderItem = memo((props: { item: number }) =&gt; {
    return (
      &lt;View key={props.item}&gt;
        { console.log(&quot;render&quot;, props.item) }
        &lt;Text&gt;{ props.item }&lt;/Text&gt;
      &lt;/View&gt;
    )
  })
  
  const renderItemHandler = ({ item }: { item: number }) =&gt; {
    return &lt;RenderItem item={item} /&gt;
  }
  
  export default function App() {....
  </code></pre>