SectionList for grouped data in React Native - UI Render Trace

Component - SectionList for grouped data

The SectionList component in React Native displays a list of items grouped into sections. Each section has a header and a list of items below it. This helps organize data clearly, like a contact list grouped by first letter.

Widget Tree

SectionList
├─ SectionHeader (Text)
└─ Item (Text)

The root is a SectionList that renders multiple sections. Each section has a header shown by a Text component, followed by multiple item Text components listed vertically.

Render Trace - 3 Steps

Step 1: SectionList

Step 2: SectionHeader (Text)

Step 3: Item (Text)

State Change - Re-render

Trigger:Sections data changes (e.g., new groups or items added)

Before

SectionList shows old sections and items

→

After

SectionList updates to show new or changed sections and items

Re-renders:Entire SectionList rerenders affected sections and their items

UI Quiz - 3 Questions

What does the SectionList component display?

A Only section headers without items

B A list grouped by sections with headers and items

C A single flat list without grouping

D Only items without headers

Key Insight

Using SectionList helps organize long lists into clear groups with headers, improving readability and user navigation. It efficiently renders only visible sections and items, which is good for performance on mobile devices.