How to optimize FlatList in React Native

Question

Can you please tell me how can I optimize this flatlist in react native. I mean how can I do that app will render not the whole list of data but just small part of it for example 10 items, and then when the user will scroll it down it will load more of data from list?

that's the code

import React, {useState, useEffect} from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  View,
  FlatList,
  TextInput,
} from 'react-native';
import {newdata} from '../Data/newdata';

const Sample = () => {
  const DATA = newdata;
  const [searchText, onChangeSearch] = useState('');
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
    const filtered = DATA.filter(item =>
      item.title.toLowerCase().includes(searchText.toLowerCase()),
    );
    if (searchText === '') {
      return setFilteredData(DATA);
    }

    setFilteredData(filtered);
  }, [searchText]);

  const Item = ({title}) => (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );

  const renderItem = ({item}) => <Item title={item.title} />;

  return (
    <SafeAreaView style={styles.container}>
      <TextInput
        style={{
          height: 50,
          borderColor: '#919191',
          borderWidth: 1,
          margin: 10,
          paddingLeft: 15,
          borderRadius: 10,
        }}
        onChangeText={newText => onChangeSearch(newText)}
        placeholder="Axtaris..."
      />
      <FlatList
        data={filteredData}
        renderItem={renderItem}
        keyExtractor={(item, index) => item.key}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
    marginBottom: 75,
  },
  item: {
    backgroundColor: '#ededed',
    padding: 20,
    marginVertical: 2,
    marginHorizontal: 10,
    borderRadius: 20,
  },
  title: {
    fontSize: 20,
  },
});

export default Sample;

PS newdata has about 42000 of items, and app running very slow. That is the screenshot of app

Answer 1

You can easily achieve that by using the initialNumToRender prop in FlatList component

How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.

  <FlatList
    data={filteredData}
    renderItem={renderItem}
    keyExtractor={item => item.key}
    initialNumToRender={10}
  />

Answer 2

Ali,

You have some features inside Flatlist in order to optimize it for example:

maxtorenderperbatch : This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll. Read more here

initialNumToRender : Define precise number of items that would cover the screen for every device. [Read more here][1]

Also, you can use Infinite Scroll, is very useful instead of render the whole list you can render only amount of items, and when the user is scrolling to the end the app load more items.

onEndReached : Called once when the scroll position gets within onEndReachedThreshold of the rendered content.

onEndReachedThreshold : How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback.

Here is an example how to use it.

<FlatList
    data={filteredData}
    renderItem={renderItem}
    keyExtractor={(item, index) => item.key}

    onEndReached={ loadMoreItems }
    onEndReachedThreshold={ 0.5 }
    maxToRenderPerBatch={3}
    initialNumToRender={5}

  />

loadMoreItems:

const loadMoreItems = ( ) => {
        
       // Here you logic to render more items, when user scroll to the end
}