title: FlatList rendering is heavy for big data set
body: <p>In my application I have a <code>FlatList</code> with dataset of 100 items in it. Each item has a complex UI and I noticed that it's taking a heavy toll on performance. The page that has the list takes up to 5 seconds to load.
  I noticed that the moment the component is rendered for the first time, the <code>renderItem</code> function of the <code>FlatList</code> is also called for each and every item in my data set, I also noticed that it also happens if there any other setState change for other stuff on that page. Is there a way to prevent this re-rendering of the flat list or at least to re-render only the visible items - just like with Recycle with in native Android?
  How can I only render the visible items when the component first appears?
  I tried to use <code>initialNumToRender</code> and <code>maxToRenderPerBatch</code> but neither have worked.</p>
  <p>Here is an example of the code:</p>
  <pre><code>const Item = ({ title }) =&gt; (
    &lt;View style={styles.item}&gt;
      &lt;Text style={styles.title}&gt;{title}&lt;/Text&gt;
    &lt;/View&gt;
  );
  
  const App = () =&gt; {
  
    const [text, setText] = React.useState('')
  
    const renderItem = ({ item }) =&gt; {
      console.log(&quot;Render Item&quot;)
      return (&lt;Item title={item.title} /&gt;)
  };
  
    return (
      &lt;SafeAreaView style={styles.container}&gt;
  
        &lt;TextInput
          value={text}
          onChangeText={(val) =&gt; setText(val)}
        /&gt;
  
        &lt;FlatList
          data={DATA}
          renderItem={renderItem}
          keyExtractor={item =&gt; item.id}
          initialNumToRender={6}
          maxToRenderPerBatch={6}
        /&gt;
  
      &lt;/SafeAreaView&gt;
    );
  }
  </code></pre>
  <p>If I try to type something in <code>TextInput</code> the whole list re-renders but nothing in the list has changed.. how can I prevent this?</p>