Optimization of Long Lists

In this lesson, you will learn how to maintain a fluid, responsive UI by using windowed rendering to manage massive data sets efficiently.

The Problem: Layout Thrashing

When you render a list with hundreds or thousands of items, React Native must calculate the position, style, and size for every single element simultaneously. If you try to map over a massive array and render every component at once, the JavaScript thread becomes overwhelmed. This causes "layout thrashing," leading to dropped frames and a sluggish, unresponsive interface.

The Solution: Windowed Rendering

Instead of rendering the entire list, we use windowed rendering. This technique only draws the items currently visible on the screen—plus a small "buffer" area just outside the viewport. As the user scrolls, components that exit the screen are unmounted or recycled, and new ones are brought into the layout. This keeps your component tree slim and your layout thread focused only on what the user can actually see.

To implement this, we move away from ScrollView (which renders everything) and use a specialized list component that handles the "window" for us:

import { FlatList, Text, View } from 'react-native';

const MassiveList = ({ data }) => {
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <View><Text>{item.title}</Text></View>}
      keyExtractor={(item) => item.id}
      // windowSize determines how many "screens" worth of content to render
      windowSize={5} 
    />
  );
};

Why this works

By setting a windowSize, we tell React Native exactly how much content to keep in memory. A value of 5 means it renders the visible screen plus two screens worth of items above and below. Anything outside that window is effectively "paused" or removed from the active view hierarchy. This prevents your app from consuming excessive memory and keeps the interaction smooth, regardless of how deep your data goes.

Key Takeaway: To keep your UI responsive, never render large arrays directly; use windowed rendering to limit the active view hierarchy to only what is visible on the screen.