Realm database in React Native - Deep Dive

Overview - Realm database

What is it?

Realm database is a mobile database designed to store and manage data directly on your device. It lets apps save information like user settings, messages, or game scores without needing internet access. Unlike traditional databases, Realm is built for mobile apps to be fast, easy to use, and work smoothly with React Native. It helps apps keep data safe and available even when offline.

Why it matters

Without Realm or similar mobile databases, apps would struggle to save data locally, forcing users to rely on slow or unreliable internet connections. This would make apps less responsive and frustrating to use. Realm solves this by providing a fast, reliable way to store data on the device, improving user experience and enabling offline functionality. It also simplifies data handling for developers, saving time and reducing bugs.

Where it fits

Before learning Realm, you should understand basic React Native app structure and JavaScript programming. Knowing about asynchronous programming and simple data storage like AsyncStorage helps. After Realm, you can explore advanced data syncing, offline-first app design, and integrating cloud databases for real-time updates.

Mental Model

Core Idea

Realm database is like a personal notebook inside your phone that apps use to quickly write and read data without waiting for the internet.

Think of it like...

Imagine you have a small notebook in your pocket where you jot down important things you want to remember instantly. You don’t need to call anyone or go online; it’s always with you and easy to open. Realm is that notebook for your app’s data.

┌───────────────┐
│ React Native  │
│   App Layer   │
└──────┬────────┘
       │
┌──────▼────────┐
│ Realm Database│
│  Local Store  │
└──────┬────────┘
       │
┌──────▼────────┐
│ Device Storage│
│  (Disk/Flash) │
└───────────────┘

Build-Up - 7 Steps

1

Foundation

What is Realm Database

Concept: Introduce Realm as a local database designed for mobile apps.

Realm is a database that lives inside your mobile device. It stores data in a way that apps can quickly access and update it. Unlike traditional databases that need servers, Realm works offline and syncs when online.

Result

You understand Realm is a fast, local database for mobile apps that works offline.

Understanding Realm as a local database clarifies why it improves app speed and offline use.

2

Foundation

Basic Realm Setup in React Native

Concept: Learn how to install and initialize Realm in a React Native app.

To use Realm, you install it via npm or yarn. Then you define your data models (like blueprints) and open a Realm instance to read or write data. This setup connects your app to the local database.

Result

You can set up Realm in a React Native project and open a database instance.

Knowing how to set up Realm is the first step to managing app data efficiently.

3

Intermediate

Defining and Using Realm Schemas

🤔Before reading on: do you think Realm schemas are flexible like JSON or strict like a class? Commit to your answer.

Concept: Schemas define the shape of data Realm stores, similar to tables in other databases.

In Realm, you create schemas to tell the database what kind of data to expect. For example, a 'Task' schema might have 'name' as a string and 'done' as a boolean. This helps Realm organize and validate data.

Result

You can create schemas that define data structure and use them to store and retrieve data.

Understanding schemas helps prevent data errors and keeps your app’s data organized.

4

Intermediate

Reading and Writing Data with Realm

🤔Before reading on: do you think Realm uses asynchronous calls like fetch, or synchronous calls for data access? Commit to your answer.

Concept: Learn how to add, update, and query data in Realm using simple commands.

Realm lets you write data inside a 'write' block and read data by querying the database. For example, you can add a new task or find all tasks that are not done. These operations are fast and easy to use.

Result

You can perform basic data operations like create, read, update, and delete in Realm.

Knowing how to read and write data is essential to making your app interactive and dynamic.

5

Intermediate

Realm’s Live Objects and Reactivity

🤔Before reading on: do you think Realm data updates automatically in your app UI or requires manual refresh? Commit to your answer.

Concept: Realm provides live objects that update automatically when data changes.

When you query Realm, it returns live objects that reflect the current data. If data changes elsewhere, these objects update automatically, so your UI can react instantly without extra code.

Result

Your app UI stays in sync with data changes automatically using Realm’s live objects.

Understanding live objects reduces the need for manual state management and improves app responsiveness.

6

Advanced

Handling Realm in React Native Components

🤔Before reading on: do you think Realm data should be stored in React state or accessed directly? Commit to your answer.

Concept: Learn best practices to integrate Realm data with React Native components and hooks.

You can use Realm with React hooks like useEffect and useState. Often, you subscribe to Realm data changes and update component state accordingly. This keeps UI and data consistent and avoids memory leaks.

Result

You can build React Native components that display and update Realm data efficiently.

Knowing how to connect Realm with React lifecycle prevents bugs and improves app performance.

7

Expert

Realm Sync and Offline-First Architecture

🤔Before reading on: do you think Realm syncs data automatically or requires manual sync calls? Commit to your answer.

Concept: Explore Realm’s ability to sync data with a backend server, enabling offline-first apps.

Realm Sync lets your app work offline and automatically syncs changes when online. It handles conflicts and merges data safely. This makes apps reliable even with spotty internet and simplifies backend integration.

Result

You understand how Realm supports offline-first apps with automatic data synchronization.

Knowing Realm Sync’s power helps build robust apps that work seamlessly offline and online.

Under the Hood

Realm stores data in a custom, efficient binary format on the device’s storage. It uses zero-copy architecture, meaning it accesses data directly from disk without extra copying, making reads and writes very fast. Realm objects are live and auto-updating because they are pointers to this on-disk data. The database manages transactions to keep data consistent and supports multi-threading by isolating Realm instances per thread.

Why designed this way?

Realm was designed to overcome the slowness and complexity of traditional SQLite or file-based storage on mobile. By using a custom storage engine and live objects, it provides speed and simplicity. The zero-copy design reduces memory use and CPU load, crucial for mobile devices with limited resources. Sync was added later to support modern offline-first app needs.

┌───────────────┐
│ React Native  │
│   App Layer   │
└──────┬────────┘
       │
┌──────▼────────┐
│ Realm JS API  │
│  (Live Objects│
│   & Queries)  │
└──────┬────────┘
       │
┌──────▼────────┐
│ Realm Core DB │
│  (Zero-Copy  │
│   Storage)   │
└──────┬────────┘
       │
┌──────▼────────┐
│ Device Storage│
│  (Disk/Flash) │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think Realm queries return static snapshots or live-updating data? Commit to your answer.

Common Belief: Realm queries return static copies of data that don’t change unless you query again.

Reality: Realm queries return live objects that automatically update when the underlying data changes.

Why it matters: Believing queries are static leads to unnecessary re-fetching and complex state management, making apps slower and more error-prone.

Quick: Do you think Realm requires internet to work? Commit to your answer.

Common Belief: Realm needs an internet connection because it syncs data with a server.

Reality: Realm works fully offline; syncing is optional and happens automatically when online.

Why it matters: Thinking Realm needs internet can discourage using it for offline apps, missing its key advantage.

Quick: Do you think Realm is just a wrapper around SQLite? Commit to your answer.

Common Belief: Realm is a simple wrapper over SQLite providing easier APIs.

Reality: Realm uses its own custom storage engine optimized for mobile, not SQLite.

Why it matters: Assuming Realm is SQLite-based can cause confusion about performance and features like live objects.

Quick: Do you think you must manually manage Realm instances across threads? Commit to your answer.

Common Belief: You can share one Realm instance safely across multiple threads.

Reality: Each thread must have its own Realm instance; sharing instances causes errors.

Why it matters: Mismanaging Realm instances leads to crashes and data corruption in multi-threaded apps.

Expert Zone

1

Realm’s zero-copy architecture means objects are pointers to on-disk data, so modifying them directly changes the database without extra copying.

2

Realm instances are lightweight and cheap to create, so opening and closing them frequently is a recommended pattern to avoid threading issues.

3

Realm Sync uses conflict-free replicated data types (CRDTs) under the hood to merge changes from multiple devices safely without data loss.

When NOT to use

Realm is not ideal for apps requiring complex SQL queries, joins, or relational data beyond simple links. In such cases, SQLite or server-side databases with REST APIs might be better. Also, if your app does not need offline support or local storage, cloud-only solutions may suffice.

Production Patterns

In production, developers use Realm with React Native hooks to subscribe to live data changes and update UI reactively. They structure schemas carefully to optimize queries and use Realm Sync for seamless offline-online data consistency. Error handling includes managing Realm instance lifecycles per thread and handling sync conflicts gracefully.

Connections

Offline-First App Design

Realm builds on offline-first principles by providing local data storage with automatic sync.

Understanding Realm helps grasp how apps can remain fully functional without internet and sync data later.

Reactive Programming

Realm’s live objects embody reactive programming by automatically updating data consumers on changes.

Knowing reactive patterns clarifies why Realm reduces manual state updates and improves UI responsiveness.

File Systems

Realm’s zero-copy storage accesses data directly from device storage like a file system optimized for databases.

Understanding file system concepts helps appreciate Realm’s performance advantages on mobile devices.

Common Pitfalls

#1 Trying to share one Realm instance across multiple threads.

Wrong approach:

const realm = new Realm({schema: [Task]});
// Used in multiple threads without reopening
function threadFunction() {
realm.write(() => { /* ... */ });
}

Correct approach:

function threadFunction() {
const realm = new Realm({schema: [Task]});
realm.write(() => { /* ... */ });
realm.close();
}

Root cause:

Misunderstanding that Realm instances are not thread-safe and must be created per thread.

#2 Not wrapping data writes inside a write transaction.

Wrong approach:

realm.create('Task', {name: 'Buy milk', done: false}); // Without write block

Correct approach:

realm.write(() => {
realm.create('Task', {name: 'Buy milk', done: false});
});

Root cause:

Not knowing Realm requires all data modifications to happen inside write transactions.

#3 Assuming Realm queries return static data snapshots.

Wrong approach:

const tasks = realm.objects('Task');
// Using tasks as static data without reacting to changes

Correct approach:

const tasks = realm.objects('Task');
// Subscribe to changes or use hooks to update UI automatically

Root cause:

Lack of understanding that Realm objects are live and update automatically.

Key Takeaways

Realm database is a fast, local mobile database designed for offline use and easy integration with React Native.

It uses schemas to define data structure and live objects that update automatically when data changes.

Realm requires all data writes to be inside transactions and separate Realm instances per thread for safety.

Realm Sync enables automatic data synchronization between devices and servers, supporting offline-first apps.

Understanding Realm’s architecture and reactive nature helps build responsive, reliable mobile apps with smooth data handling.

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