Realm database in React Native - UI Render Trace

Component - Realm database

This UI component shows how a React Native app uses Realm database to store and display a list of tasks. It lets users add new tasks and see them instantly on screen.

Widget Tree

App
├─ View (container)
│  ├─ Text (title)
│  ├─ FlatList (task list)
│  │  └─ Text (task item)
│  └─ Button (add task)

The root App contains a View that holds a title Text, a FlatList showing tasks from Realm, and a Button to add new tasks. Each task is shown as a Text inside the FlatList.

Render Trace - 6 Steps

Step 1: App

Step 2: View

Step 3: Text (title)

Step 4: FlatList

Step 5: Text (task item)

Step 6: Button

State Change - Re-render

Trigger:User taps 'Add Task' button

Before

Tasks list shows current tasks from Realm

→

After

New task added to Realm and tasks list updates

Re-renders:App component and FlatList re-render to show updated tasks

UI Quiz - 3 Questions

What happens when the 'Add Task' button is pressed?

A The app closes

B A new task is saved to Realm and the list updates

C The app navigates to a new screen

D Nothing happens

Key Insight

Using Realm in React Native lets your app store data locally and update the UI instantly when data changes. FlatList efficiently shows lists from Realm, and state changes trigger re-rendering only where needed.