title: When there is a large list , flat list is laggy and sometimes crashing app in react native
body: <p>Please help me. When there is a large list, flat list is laggy and sometimes crashing app in react native .</p>
  
  <p>I have tried Optimized list: it is not showing images, and i have tried react-native large list. Nothing is working.</p>
  
  <p>This is the code:</p>
  
  <pre><code> {loading == false &amp;&amp; (
                        &lt;FlatList
                          data={this.state.data}
                          numColumns="2"
                          renderItem={({ item }) =&gt; &lt;ExampleComponent url= 
                          {item.media} /&gt;}
                          keyExtractor={(item, index) =&gt; item.itemurl}
                          windowSize={15}
                          onEndReachedThreshold={1}
                          onEndReached={this.handleLoadMore}
                          removeClippedSubviews={true}
                          maxToRenderPerBatch={10}
  
                        /&gt;
                      )}
  </code></pre>
  
  <p>This is component class </p>
  
  <pre><code>import React, { PureComponent } from "react";
  import { View, Text, StyleSheet, Image ,TouchableOpacity } from "react-native";
  import FastImage from "react-native-fast-image";
  export default class ExampleComponent extends PureComponent {
    constructor(props) {
      super(props);
      //console.log(this.props);
    }
  
    render() {
      return (
          &lt;TouchableOpacity style={styles.imageContainer}&gt;
        &lt;View &gt;
          &lt;FastImage
            source={{
              uri:this.props.url
            }}
            style={styles.imageStyle}
          /&gt;
        &lt;/View&gt;
        &lt;/TouchableOpacity&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    imageContainer: {
      flex: 1,
      borderWidth: 1,
      borderColor: "#dedede",
      borderRadius: 5,
      margin: 5
    },
    imageStyle: {
      flex: 1,
      width: null,
      height: 100,
      borderTopLeftRadius:5,
      borderTopRightRadius:5
    },
  
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/6sFIl.png" rel="nofollow noreferrer">And im getting this message in console when rows are more </a></p>
  
  <p>This is handle load more function </p>
  
  <pre><code>handleLoadMore = () =&gt; {
  console.log("Called");
  
  if (this.state.next != 0) {
    const u =
      "https://url&amp;q=" +
      this.props.navigation.state.params.data +
      "&amp;pos=" +
      this.state.next;
    fetch(u, {
      method: "GET"
    })
      .then(res =&gt; res.json())
      .then(response =&gt; {
        this.setState({
          data: [...this.state.data, ...response.results],
          next: response.next
        });
      });
  }
  </code></pre>
  
  <p>}</p>
  
  <blockquote>
    <p>VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"dt":1098,"prevDt":684,"contentLength":6832}</p>
  </blockquote>