Tháng 3 2026 - Phá Kén

Struggling with React Native FlatList lag when rendering over 1000 items? This comprehensive guide dives deep into performance optimization, common pitfalls, and practical solutions to ensure a smooth user experience, even on low-end devices.

Tagged flutter, mobile-dev, react-native

Illustration 1: React Native FlatList Performance: Conquer Lag with 1000+ Items on Any Device

Introduction: The FlatList Challenge

Alright, fellow mobile devs, let’s talk about a classic headache: the dreaded React Native FlatList performance issues. You’ve built a beautiful app, you’re populating a list with data, and then it happens. Users start scrolling, and BAM! Lag. Janky animations. The app grinds to a halt, especially when you’re dealing with a hefty amount of items – say, 1000+ – and even worse, on those less-than-powerful low-end devices. It’s a common scenario, one that can quickly turn a great user experience into a frustrating one.

We’ve all been there. You’re proud of your data-driven UI, but the performance just isn’t cutting it. The good news? This isn’t an insurmountable problem. In this post, we’re going to roll up our sleeves and dive deep into the nitty-gritty of React Native FlatList performance optimization. We’ll cover the root causes of lag, explore proven techniques, and arm you with practical solutions, complete with code examples, to ensure your lists are buttery smooth, no matter how many items they hold or what device they’re running on.

>Understanding the Core Problem: Why Does FlatList Lag?

Before we jump into fixes, it’s crucial to understand *why* FlatList lag happens in the first place. React Native’s FlatList is designed to be performant out of the box, but it’s not magic. It relies on a concept called virtualization. This means it only renders the items that are currently visible on the screen, plus a small buffer around them. As you scroll, it recycles and reuses these views, rather than rendering all 1000+ items at once. This is a massive improvement over rendering everything, but it’s not without its complexities.

So, what breaks this elegant system and causes lag, especially when trying to render 1000 items?

Expensive Item Rendering: Each item in your list is a React component. If that component is complex, takes a long time to render (e.g., lots of nested views, complex calculations, heavy image loading, or intricate styling), then the performance hit can be significant, even with virtualization. When you scroll, the `FlatList` needs to render new items quickly. If each item takes 100ms to render, you’re going to see jank.
Frequent Re-renders: React components re-render when their props or state change. If your item components re-render unnecessarily (due to parent component re-renders, unstable `keyExtractor` props, or improper state management within the items), this adds overhead.
Unstable Keys: The keyExtractor prop is vital for React to efficiently identify which items have changed, been added, or been removed. If your keys are not unique and stable (e.g., using array indices as keys when the array can be reordered or filtered), React might do unnecessary work, including re-rendering entire items that haven’t actually changed.
Large Data Sets and Complex State Management: While virtualization helps, if your overall component tree is heavily burdened by complex state management or if you’re passing down large, complex data structures as props to your list items, this can still impact performance.
Inefficient Image Loading: Images are often the biggest culprits in list performance. Loading large images, not optimizing them, or having many images within list items can drastically slow down scrolling.
Device Limitations: On low-end devices, the CPU and memory are more constrained. This means that even slightly inefficient rendering or re-rendering can be amplified, leading to noticeable lag.

>Key Optimization Techniques for React Native FlatList Performance

Now that we understand the ‘why,’ let’s get to the ‘how.’ Here are the fundamental techniques you should implement to boost your React Native FlatList performance.

1. The Magic of `keyExtractor`

This is non-negotiable. Every item in your FlatList needs a unique and stable key. This allows React to track each item efficiently. Never use the array index as a key unless you are absolutely certain your list will never be reordered, filtered, or modified in a way that changes the index of existing items. This is rarely the case.

Best Practice: Use a unique ID from your data. If your data items don’t have a natural unique ID, generate one. Using something like the item’s `id` or `uuid` is ideal.


FlatList
data={myData}
renderItem={({ item }) => <ItemComponent item={item} />}
keyExtractor={(item) => item.id} 
/>

Why it works: Stable keys tell React exactly which item has changed, been added, or removed. This prevents React from tearing down and re-rendering components unnecessarily, which is a huge performance win.

2. Optimize Your `renderItem` Component

This is where a lot of performance gains are found. Your renderItem function should return a component that is as lightweight and efficient as possible. Think about:

Minimize Re-renders: Use React.memo() for your item components. This higher-order component memoizes your component, meaning React will skip re-rendering it if its props haven’t changed.
Avoid Inline Functions/Objects: Creating new functions or objects within the `renderItem` prop for each render can cause unnecessary re-renders of the child item components if not handled carefully.
Keep Components Simple: Break down complex UI elements within list items into smaller, reusable components.

Let’s see an example using React.memo():


// ItemComponent.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const ItemComponent = ({ item }) => {
console.log('Rendering item:', item.id);
return (

{item.title}
{item.description}

);
};
const styles = StyleSheet.create({
item: {
padding: 15,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
},
});
// Wrap with React.memo
export default React.memo(ItemComponent);
// In your screen component:
import React from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';
import ItemComponent from './ItemComponent'; // Import the memoized component
const MyListComponent = ({ data }) => {
const renderItem = ({ item }) => (

);
return (



);
};
// ... styles ...
export default MyListComponent;

Why it works: React.memo() performs a shallow comparison of the component’s props. If the props haven’t changed since the last render, React reuses the last rendered result, skipping the re-render cycle entirely. This is incredibly powerful for list items that often receive the same props repeatedly.

3. `getItemLayout` for Performance Boost

The getItemLayout prop is a game-changer, especially when all your list items have a fixed height. It allows FlatList to calculate the position and size of items without having to render them first. This significantly improves scrolling performance, particularly for jumping to specific items (like using scrollToIndex).

How to use it: You provide a function that takes an item index and returns an object with `length`, `offset`, and `index` properties.


const ITEM_HEIGHT = 70; // Assuming each item is 70px tall
const MyListComponent = ({ data }) => {
const renderItem = ({ item }) => (
 // Pass height if needed by ItemComponent
);
const getItemLayout = (data, index) => (
{ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index }
);
return (

);
};

Important Considerations:

This only works reliably if all items have the same height. If your items have variable heights, you might need a more complex solution or avoid getItemLayout.
Ensure your `ITEM_HEIGHT` calculation is accurate.

Why it works: By knowing the exact layout of each item beforehand, FlatList can perform scroll animations and calculations much faster. It doesn’t need to wait for components to mount and measure themselves. This is particularly effective for fast scrolling and scrolling to specific indices.

4. Control `removeClippedSubviews` (Use with Caution)

This prop, when set to true, can improve performance by removing views that are outside the visible viewport. However, it can sometimes introduce bugs, especially on Android, where it might cause content to disappear unexpectedly.


FlatList
data={myData}
renderItem={({ item }) => <ItemComponent item={item} />}
keyExtractor={(item) => item.id}
removeClippedSubviews={true} // Try this, but test thoroughly!
/>

Why it works: It reduces the number of views the native UI thread has to manage, potentially speeding up rendering and memory usage. However, its effectiveness and potential for bugs vary significantly between platforms and versions.

5. `initialNumToRender` and `maxToRenderPerBatch`

These props help control how many items are rendered initially and in subsequent batches as the user scrolls. Tuning these can balance initial load time with scrolling responsiveness.

`initialNumToRender`: Determines how many items to render in the first frame. A higher number means a longer initial render but fewer items to render as the user starts scrolling immediately.
`maxToRenderPerBatch`: Determines how many items are rendered in each subsequent batch as the user scrolls. A lower number means more frequent, smaller renders, which can feel smoother but might lead to more overall re-renders.


FlatList
data={myData}
renderItem={({ item }) => <ItemComponent item={item} />}
keyExtractor={(item) => item.id}
initialNumToRender={10} 
maxToRenderPerBatch={10} 
windowSize={21} // Controls how many screens worth of items to keep rendered
/>

Why it works: These props give you fine-grained control over the rendering process. By adjusting them, you can optimize for faster initial loads or smoother scrolling depending on your app’s needs and the typical data size.

Experimentation is key here. Start with sensible defaults (like 10-15 for initialNumToRender and maxToRenderPerBatch) and adjust based on your profiling results and target devices.

6. `windowSize`

This prop defines the number of screens worth of items to keep rendered outside of the visible area. A larger windowSize means more items are kept rendered, which can lead to smoother scrolling when panning quickly, but it also increases memory usage and initial render time.

Default is 21 (10 above, 10 below, plus the visible items).
Reducing it can save memory but might cause blank areas during fast scrolls.
Increasing it can improve fluidity during fast scrolls but uses more memory.

Tuning this often goes hand-in-hand with initialNumToRender and maxToRenderPerBatch.

>Advanced Strategies for Extreme Performance Gains

If the basic optimizations aren’t enough, especially for very large lists or extremely demanding UIs, consider these more advanced techniques.

1. Optimize Image Loading

Images are often the biggest performance bottleneck. If your list items contain images, ensure you’re:

Using Optimized Image Sizes: Don’t load huge images if they’re only displayed as small thumbnails. Resize them server-side or use image-resizing services.
Using `react-native-fastimage`: This library offers significant performance improvements over the built-in Image component, including caching and request prioritization.
Lazy Loading Images: Only load images when they are about to enter the viewport. Libraries like `react-native-lazy-load` or manual intersection observer logic can help.
Placeholder Images: Display a placeholder while the actual image is loading.

For example, using react-native-fastimage:


import FastImage from 'react-native-fast-image';
const ImageItem = ({ uri }) => (

);

Why it works: Efficient image loading reduces the burden on the CPU and memory, allowing the UI thread to focus on rendering and scrolling. Better caching prevents redundant downloads.

2. Leverage `useCallback` and `useMemo`

While React.memo() is excellent, sometimes you need more granular control over when components re-render or when expensive calculations are performed. useCallback and useMemo are React hooks that can help prevent unnecessary re-renders and computations.

`useCallback`: Memoizes callback functions. This is useful when passing callbacks as props to child components that are memoized with `React.memo()`. Without `useCallback`, a new function instance is created on every parent render, which bypasses `React.memo()`’s shallow comparison.
`useMemo`: Memoizes the result of a computation. If you have a complex calculation that derives some data for your list items, `useMemo` can ensure it’s only re-computed when its dependencies change.


// In your screen component, if passing complex props or functions
import React, { useCallback, useMemo } from 'react';
const MyListComponent = ({ data, onItemSelected }) => {
const memoizedRenderItem = useCallback(({ item }) => {
// If onItemSelected is stable and ItemComponent is memoized, this prevents re-renders
return ;
}, [onItemSelected]); // Dependency: re-create if onItemSelected changes
// Example of useMemo for derived data
const processedData = useMemo(() => {
return data.map(item => ({ ...item, derivedValue: calculateComplexValue(item) }));
}, [data]);
return (

);
};

Why it works: These hooks ensure that referential equality is maintained for props and that expensive computations are only run when necessary. This reduces the work React needs to do during the reconciliation process, leading to smoother rendering.

3. Consider Using `flashList` from Shopify

For extreme performance needs, especially with very complex list items or massive datasets, the community has developed highly optimized alternatives. One of the most popular is FlashList by Shopify.

FlashList is a drop-in replacement for FlatList that’s built from the ground up for optimal performance. It uses a more advanced recycling mechanism and is generally faster and more memory-efficient than the standard FlatList, especially on Android.

How to use it (basic):


// First, install it:
// npm install @shopify/flash-list
// or
// yarn add @shopify/flash-list
import { FlashList } from "@shopify/flash-list";
const MyListComponent = ({ data }) => {
const renderItem = ({ item }) => (

);
return (

);
};

Key difference: FlashList requires `estimatedItemSize` instead of `getItemLayout`. It uses this estimate to prepare the render space, and it’s very effective even with slight variations in item size.

Why it works: FlashList leverages more aggressive view recycling and a more efficient rendering pipeline than the standard FlatList, especially by minimizing JavaScript overhead and optimizing for the native UI thread.

>Common Mistakes and How to Avoid Them

Even with the best intentions, developers often fall into common traps when optimizing FlatList. Let’s highlight a few:

Not Profiling: Guessing where the performance issues lie is a recipe for disaster. Use the React Native Debugger (Profiler tab) or Flipper to identify which components are re-rendering and how long they take to render.
Over-Optimization: Don’t add React.memo, useCallback, and useMemo to *everything*. These optimizations add their own overhead. Profile first, then optimize the specific bottlenecks you find.
Ignoring `keyExtractor` Stability: As mentioned, this is a cardinal sin. Ensure your keys are truly unique and stable.
Complex Logic Inside `renderItem`: Heavy computations or data transformations should be done *before* passing data to the FlatList, or memoized using useMemo outside the render function.
Unnecessary Props: Passing down large, complex objects or functions that don’t change as props to list items can cause re-renders even if the item itself doesn’t need to update.
Forgetting Platform Differences: Some optimizations (like removeClippedSubviews) behave differently on iOS and Android. Always test on both platforms.

>Conclusion: Achieving Smooth Scrolling

Tackling React Native FlatList performance issues when rendering 1000+ items, especially on low-end devices, is a multifaceted challenge. It requires a deep understanding of React’s rendering principles, React Native’s virtualization, and a methodical approach to optimization.

By consistently applying best practices like a stable keyExtractor, optimizing your renderItem components with React.memo, leveraging getItemLayout for fixed-height items, and carefully tuning rendering props like initialNumToRender and maxToRenderPerBatch, you’ll see significant improvements.

For those pushing the boundaries, advanced techniques such as optimizing image loading and considering libraries like FlashList offer even greater gains.

Remember: profile, measure, and then optimize. Don’t fall into common traps. With the right strategies, you can transform a laggy list into a smooth, responsive user experience that delights your users, regardless of their device.

Happy coding!