FlatList basics (data, renderItem, keyExtractor) in React Native - UI Render Trace

Component - FlatList basics (data, renderItem, keyExtractor)

This component shows a list of items using React Native's FlatList. It takes data, draws each item with renderItem, and uses keyExtractor to give each item a unique ID for smooth updates.

Widget Tree

FlatList
 ├─ View (container)
 │   ├─ Text (item 1)
 │   ├─ Text (item 2)
 │   ├─ Text (item 3)
 │   └─ ...

The FlatList is the main widget showing a scrollable list. Inside it, each item is rendered as a Text component inside a View container. The list scrolls vertically by default.

Render Trace - 5 Steps

Step 1: FlatList

Step 2: renderItem

Step 3: renderItem

Step 4: renderItem

Step 5: keyExtractor

State Change - Re-render

Trigger:Adding a new fruit item to the data array

Before

data=[{id:'1',name:'Apple'},{id:'2',name:'Banana'},{id:'3',name:'Cherry'}]

→

After

data=[{id:'1',name:'Apple'},{id:'2',name:'Banana'},{id:'3',name:'Cherry'},{id:'4',name:'Date'}]

Re-renders:FlatList re-renders only the new item 'Date' and updates the list display.

UI Quiz - 3 Questions

What does the keyExtractor function do in FlatList?

A It decides how to display each item

B It gives each list item a unique ID for React to track

C It sorts the list items alphabetically

D It adds a scroll bar to the list

Key Insight

FlatList efficiently renders long lists by only drawing visible items and using unique keys to track changes. This keeps the app smooth and fast even with many items.