React Query for data fetching in React Native - UI Render Trace

Component - React Query for data fetching

This component uses React Query to fetch data from an API and display it in a list. It shows loading and error states automatically, making data fetching easy and efficient in React Native apps.

Widget Tree

QueryClientProvider
└── View
    ├── Text (Title)
    ├── Conditional (Loading/Error)
    │   ├── ActivityIndicator (if loading)
    │   └── Text (if error)
    └── FlatList
        └── Text (List Item)

The root is QueryClientProvider which provides React Query context. Inside, a View holds a title Text, a conditional area that shows a spinner or error message, and a FlatList that renders fetched items as Text components.

Render Trace - 6 Steps

Step 1: QueryClientProvider

Step 2: View

Step 3: Text (Title)

Step 4: Conditional (Loading/Error)

Step 5: FlatList

Step 6: Text (List Item)

State Change - Re-render

Trigger:React Query finishes fetching data from API

Before

loading: true, data: undefined, error: undefined

→

After

loading: false, data: array of users, error: undefined

Re-renders:FlatList and Conditional loading/error components re-render to show data

UI Quiz - 3 Questions

What does the ActivityIndicator show in this UI?

A It shows while data is loading

B It shows when data is loaded

C It shows when there is an error

D It shows the list of users

Key Insight

Using React Query in React Native simplifies data fetching by automatically managing loading and error states, caching, and updating UI when data changes. This reduces manual state management and improves user experience with responsive feedback.