How I Increased List Scroll FPS from 30 to 58 in React Native

#reactnative #react #mobile

From the author of the Telegram channel REACT NATIVE HUB.

Join a growing community of React Native Devs! 👆

Performance optimization is one of the most critical phases of mobile application development. As React Native developers, we often deal with lists containing hundreds or even thousands of items.

In this article, I'll walk you through how I optimised large lists by replacing FlatList with FlashList, a high-performance alternative from Shopify.

I'll also share additional optimisations like getItemLayout, viewabilityConfig, and item render caching to improve rendering efficiency and scrolling smoothness.

🚀 The Problem: Low Performance in Large Lists

When dealing with large lists (1000+ items), you may notice:

Slow initial renders: The app takes longer to display the first few items.
Frame drops while scrolling: Laggy scrolling with low FPS (frames per second).
High memory usage: FlatList keeps too many items in memory, affecting performance.

These issues occur because FlatList renders items dynamically but still incurs unnecessary rendering overhead, especially when items enter or leave the viewport.

✅ The Solution: Using FlashList for Better Performance

Install:

React Native
yarn add @shopify/flash-list cd ios && pod install

Expo
npx expo install @shopify/flash-list

Here's how you can integrate FlashList into your app:
import { FlashList } from "@shopify/flash-list";

const ITEM_HEIGHT = 100; // Define your item height
const OptimizedList = ({ items }) => {
  const renderItem = ({ item }) => (
    <ItemComponent data={item} />
  );
  const getItemLayout = (data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  });
  return (
    <FlashList
      data={items}
      renderItem={renderItem}
      estimatedItemSize={100} // Helps FlashList optimize rendering
      getItemLayout={getItemLayout}
      viewabilityConfig={{
        waitForInteraction: true,
        viewAreaCoveragePercentThreshold: 50,
      }}
      windowSize={5} // Controls the number of items rendered around the viewport
    />
  );
};

🔍 Breaking Down the Optimization Techniques

1️⃣ Replacing FlatList with FlashList

FlashList estimates item sizes in advance, reducing re-renders and improving performance.
Uses optimized memory management to keep only essential items in memory.

2️⃣ Implementing getItemLayout

Pre-defining item heights avoids unnecessary calculations, making scrolling smoother.
Benefit: Eliminates UI lag caused by recalculating positions dynamically.

3️⃣ Optimizing viewabilityConfig

Helps control when items are considered "visible," reducing excess re-renders.
Setting viewAreaCoveragePercentThreshold: 50 ensures items are efficiently tracked.

4️⃣ Using windowSize for Efficient Memory Management

Reducing windowSize ensures only a small number of items are kept in memory at any time.
Benefit: Lowers memory consumption and improves overall performance.

📊 The Results: Huge Performance Gains

After implementing these optimizations, we observed:

✅ FPS boost: From 30fps to 58fps 📈
✅ Initial render time reduced by 40% ⏩
✅ Memory usage decreased by 25% 🔥

💡 Final Thoughts

If you're building React Native apps with large lists, switching to FlashList can significantly improve performance. By combining it with smart optimizations like getItemLayout, viewabilityConfig, and reduced windowSize, you can achieve smooth scrolling, faster renders, and lower memory consumption.

Have you tried FlashList in your project? Share your experience in the comments below! 🚀

About me: My name is Arsen, and I am a react native developer and owner of the TG channel 👇

🔗 Join TG community for React Native Devs: REACT NATIVE HUB