JSON response parsing in React Native - UI Render Trace

Component - JSON response parsing

This React Native component fetches data from a JSON API and shows a list of items on the screen. It parses the JSON response and updates the UI with the data.

Widget Tree

View
├─ Text (Title)
├─ FlatList
│  └─ renderItem: View > Text
└─ Button (Refresh)

The main container is a View. Inside it, a Text shows the title at the top. Below is a FlatList that displays each item from the JSON data as a Text inside a View. At the bottom, a Button lets the user refresh the data.

Render Trace - 4 Steps

Step 1: View

Step 2: Text

Step 3: FlatList

Step 4: Button

State Change - Re-render

Trigger:User taps the 'Refresh' button

Before

items array contains previously fetched data

→

After

items array updated with new JSON data from API

Re-renders:FlatList and its children re-render to show updated items

UI Quiz - 3 Questions

What happens when the JSON response is successfully parsed?

A The list updates to show new items

B The screen background color changes

C The title text disappears

D The button becomes disabled

Key Insight

Parsing JSON responses and updating UI lists is a common pattern in mobile apps. Using FlatList with a keyExtractor ensures smooth scrolling and efficient updates when data changes.