Infinite scrolling (onEndReached) in React Native - UI Render Trace

Component - Infinite scrolling (onEndReached)

This component shows a list of items that loads more data automatically when you scroll to the bottom. It uses onEndReached to detect when to fetch more items, creating an endless scroll effect.

Widget Tree

FlatList
├── renderItem (Text)
└── ListFooterComponent (ActivityIndicator)

The main component is a FlatList that displays a vertical list of Text items. At the bottom, a loading spinner (ActivityIndicator) appears when new data is loading.

Render Trace - 3 Steps

Step 1: FlatList

Step 2: renderItem (Text)

Step 3: ListFooterComponent (ActivityIndicator)

State Change - Re-render

Trigger:User scrolls near the bottom of the list

Before

data contains initial items, loading is false

→

After

loading is true, new items appended to data after fetch, loading set to false

Re-renders:FlatList and its children rerender to show new items and update loading spinner

UI Quiz - 3 Questions

What triggers the loading of more items in this infinite scroll?

A When the app starts only

B When the user scrolls near the bottom and onEndReached fires

C When the user taps an item

D When the user shakes the device

Key Insight

Infinite scrolling improves user experience by loading data in chunks as needed, reducing initial load time and memory use. Using FlatList's onEndReached is an efficient way to detect when to fetch more data automatically.