React-Native FlatList performance problems with large list

Question

My code gets Json data to an array lists the data using a FlatList. It looks like a phonebook photo and text in a row.

Here is My code:

Answer 1

Here are some improvements you can do to optimize your flatlist:

1. Pagination
   • You can paginate your data in your backend and refetch it when your scroll gets closer to the end. onEndReached and onEndReachedThreshold can help you.
2. Update your React Native version to 49 or latest
   • Fiber 16 has amazing performance improvement which makes everything runs faster and smoother
3. Use PureComponent for render item
   • PureComponent improves the rendering and memory usage of your component, creating render items as pure gives you a better performance experience
4. Define getItemLayout prop
   • It improves item rendering since React will previously know its layout definition

Hope it helps