FlatList performance optimization in React Native - UI Render Trace

Component - FlatList performance optimization

This UI component shows a list of items efficiently using React Native's FlatList. It optimizes performance by rendering only visible items and reusing components, making scrolling smooth even with many items.

Widget Tree

FlatList
└── renderItem (View)
    └── Text

The root widget is FlatList, which manages a scrollable list. Each item is rendered by the renderItem function, which returns a View containing a Text component showing the item content.

Render Trace - 4 Steps

Step 1: FlatList

Step 2: renderItem

Step 3: FlatList scrolling

Step 4: FlatList recycling

State Change - Re-render

Trigger:User scrolls near the end of the list

Before

FlatList shows initial 10 items, no more loaded

→

After

FlatList appends next batch of items to the list and renders them

Re-renders:FlatList and newly added renderItem components re-render; existing visible items remain unchanged

UI Quiz - 3 Questions

What does FlatList do to improve performance when showing many items?

A It renders all items at once for faster access

B It disables scrolling to avoid lag

C It renders only visible items and reuses components

D It uses images instead of text for items

Key Insight

Using FlatList with properties like initialNumToRender, maxToRenderPerBatch, windowSize, and removeClippedSubviews helps keep mobile apps smooth and responsive by rendering only what is needed and freeing memory from offscreen items.