FlatList optimization techniques in React Native - UI Render Trace

Component - FlatList optimization techniques

This component shows a list of items using React Native's FlatList. It uses optimization techniques to make scrolling smooth and reduce unnecessary re-renders, improving app performance on mobile devices.

Widget Tree

FlatList
├─ ListHeaderComponent
├─ renderItem (ItemComponent)
│  ├─ View
│  └─ Text
└─ ListFooterComponent

The FlatList is the main container showing a scrollable list. It has optional header and footer components. Each item is rendered by a separate ItemComponent, which contains a View wrapping a Text showing the item content.

Render Trace - 3 Steps

Step 1: FlatList

Step 2: ItemComponent

Step 3: Scroll behavior

State Change - Re-render

Trigger:User scrolls the list

Before

Only initialNumToRender items are rendered

→

After

Additional items render as user scrolls into new areas

Re-renders:Only newly visible items and their ItemComponents re-render; previously rendered items stay mounted or unmounted based on removeClippedSubviews

UI Quiz - 3 Questions

What does the React.memo wrapper around ItemComponent help with?

A Prevents re-rendering of items when their props don't change

B Makes the list scroll vertically

C Changes the background color of items

D Loads images faster

Key Insight

Using FlatList optimization props like React.memo for item components, getItemLayout for fixed heights, and controlling rendering batches with windowSize and maxToRenderPerBatch greatly improves list performance and smoothness on mobile devices.