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.

Practice

1. What is the primary purpose of using Realm database in a React Native app?

easy

A. To handle app navigation between screens

B. To store data locally on the device for fast access

C. To style the app's user interface

D. To connect the app to a remote SQL server

Solution

1. Step 1: Understand Realm's role

   Realm is a local database designed to store data on the device itself.

2. Step 2: Compare options

   Options A, B, and C describe unrelated functions like navigation, remote servers, and UI styling, which Realm does not handle.

3. Final Answer:

   To store data locally on the device for fast access -> Option B

4. Quick Check:

   Realm = local data storage [OK]

Hint: Realm is for local data, not UI or navigation [OK]

Common Mistakes:

• Confusing Realm with remote databases
• Thinking Realm manages UI or navigation
• Assuming Realm is a cloud service

2. Which of the following is the correct way to define a Realm schema for a Task object with a string name and a boolean completed property?

easy

A. const TaskSchema = {name: 'Task', properties: {name: 'string', completed: 'bool'}};

B. const TaskSchema = {name: 'Task', properties: {name: 'string', completed: 'boolean'}};

C. const TaskSchema = {name: 'Task', properties: {name: 'String', completed: 'Bool'}};

D. const TaskSchema = {name: 'Task', properties: {name: String, completed: Boolean}};

Solution

1. Step 1: Check Realm property types

   Realm expects property types as lowercase strings like 'string' and 'bool'.

2. Step 2: Compare options

   const TaskSchema = {name: 'Task', properties: {name: 'string', completed: 'bool'}}; uses correct lowercase strings. Options A, C, and D use incorrect types or JavaScript types instead of strings.

3. Final Answer:

   const TaskSchema = {name: 'Task', properties: {name: 'string', completed: 'bool'}}; -> Option A

4. Quick Check:

   Property types are lowercase strings [OK]

Hint: Use lowercase strings for property types in schema [OK]

Common Mistakes:

• Using JavaScript types instead of strings
• Capitalizing type names incorrectly
• Omitting the 'properties' key

3. Given the following code snippet, what will be the output of console.log(tasks.length);?

const realm = await Realm.open({schema: [TaskSchema]});
realm.write(() => {
  realm.create('Task', {name: 'Buy milk', completed: false});
  realm.create('Task', {name: 'Walk dog', completed: true});
});
const tasks = realm.objects('Task');
console.log(tasks.length);

medium

A. 0

B. 1

C. 2

D. Undefined

Solution

1. Step 1: Analyze write transaction

   Two Task objects are created inside the write block, so two entries are added.

2. Step 2: Check objects query

   realm.objects('Task') returns all Task objects, so length should be 2.

3. Final Answer:

   2 -> Option C

4. Quick Check:

   Created 2 tasks, length = 2 [OK]

Hint: Count created objects inside write block [OK]

Common Mistakes:

• Forgetting to use write block for create
• Assuming objects() returns empty before commit
• Confusing length with undefined

4. What is wrong with this Realm write transaction code? (Assume the TaskSchema defines name as the primary key)

realm.write(() => {
  realm.create('Task', {name: 'Read book', completed: false});
});
realm.write(() => {
  realm.create('Task', {name: 'Read book', completed: true});
});

medium

A. The second create will throw an error because a Task with the same primary key already exists

B. You cannot call realm.write() more than once

C. The second create will update the existing object automatically

D. There is no error; this code works fine

Solution

1. Step 1: Check schema requirements

   With name as primary key, creating an object with the same primary key without update flag causes error.

2. Step 2: Analyze code behavior

   The first create succeeds. The second create uses the same name (primary key) without update flag, so it throws an error.

3. Final Answer:

   The second create will throw an error because a Task with the same primary key already exists -> Option A

4. Quick Check:

   Duplicate primary key without update flag causes error [OK]

Hint: Use primary key and update flag to avoid create errors [OK]

Common Mistakes:

• Assuming multiple writes are forbidden
• Thinking create auto-updates without flags
• Ignoring primary key requirements

5. You want to update the completed status of a Task object named 'Laundry' to true. (Assume the Task schema defines name as the primary key) Which code snippet correctly performs this update in Realm?

hard

A. realm.write(() => { realm.objects('Task').filtered('name == "Laundry"').completed = true; });

B. realm.write(() => { realm.create('Task', {name: 'Laundry', completed: true}); });

C. realm.write(() => { realm.update('Task', {name: 'Laundry', completed: true}); });

D. realm.write(() => { realm.create('Task', {name: 'Laundry', completed: true}, true); });

Solution

1. Step 1: Understand update with create

   Realm updates existing objects if you pass true as the third argument to create.

2. Step 2: Check each option

   realm.write(() => { realm.create('Task', {name: 'Laundry', completed: true}, true); }); uses true flag correctly. realm.write(() => { realm.create('Task', {name: 'Laundry', completed: true}); }); tries to create without update flag, causing error. realm.write(() => { realm.objects('Task').filtered('name == "Laundry"').completed = true; }); tries to assign directly to filtered results, which is invalid. realm.write(() => { realm.update('Task', {name: 'Laundry', completed: true}); }); uses a non-existent update method.

3. Final Answer:

   realm.write(() => { realm.create('Task', {name: 'Laundry', completed: true}, true); }); -> Option D

4. Quick Check:

   Use create with true flag to update [OK]

Hint: Use true flag in create to update existing objects [OK]

Common Mistakes:

• Forgetting the update flag for updates
• Trying to assign directly to query results
• Using non-existent Realm methods