Firestore CRUD operations in React Native - Deep Dive

Overview - Firestore CRUD operations

What is it?

Firestore CRUD operations are the basic actions you perform to create, read, update, and delete data in a Firestore database. Firestore is a cloud database that stores data in documents and collections, which you can access from your mobile app. These operations let your app save new data, get existing data, change data, or remove data as users interact with it.

Why it matters

Without CRUD operations, your app would be static and unable to save or change user data, making it useless for real-world tasks like messaging, shopping, or profiles. CRUD operations let your app communicate with the database, keeping data fresh and personalized. They solve the problem of managing data in a simple, organized way that works across devices and users.

Where it fits

Before learning Firestore CRUD, you should understand basic React Native app structure and JavaScript promises or async/await for handling asynchronous tasks. After mastering CRUD, you can learn advanced Firestore features like real-time listeners, security rules, and offline data handling to build robust apps.

Mental Model

Core Idea

Firestore CRUD operations are the four simple actions that let your app talk to the cloud database to add, get, change, or remove data anytime.

Think of it like...

Imagine a library where you can add new books (create), find and read books (read), update book details (update), or remove old books (delete). Firestore CRUD is like managing this library but for your app's data.

┌─────────────┐     ┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Create    │ --> │    Read     │ --> │   Update    │ --> │   Delete    │
└─────────────┘     └─────────────┘     └─────────────┘     └─────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Firestore Basics

Concept: Learn what Firestore is and how it organizes data into collections and documents.

Firestore stores data in collections, which are like folders, and documents, which are like files inside those folders. Each document holds data as key-value pairs. Your app accesses data by specifying collection and document names.

Result

You know how to locate and identify data in Firestore before performing any operations.

Understanding Firestore's structure is essential because all CRUD operations depend on correctly targeting collections and documents.

2

Foundation

Setting Up Firestore in React Native

Concept: Learn how to connect your React Native app to Firestore using Firebase SDK.

Install Firebase SDK, initialize Firebase in your app with config details, and import Firestore services. This setup lets your app communicate with Firestore securely.

Result

Your app can now send and receive data from Firestore.

Proper setup is the foundation for all database operations; without it, CRUD commands won't work.

3

Intermediate

Creating and Adding Documents

🤔Before reading on: do you think adding data requires specifying a document ID or can Firestore generate one automatically? Commit to your answer.

Concept: Learn how to add new documents to a collection, either with a custom ID or letting Firestore create one.

Use Firestore's add() method to create a new document with an auto-generated ID, or set() method with a specified ID. Provide data as an object with keys and values.

Result

New data appears in Firestore under the chosen collection, accessible by your app.

Knowing both ways to create documents gives flexibility in how you organize and reference data.

4

Intermediate

Reading Documents and Collections

🤔Before reading on: do you think reading data from Firestore returns data instantly or requires waiting for a response? Commit to your answer.

Concept: Learn how to fetch data from Firestore, either a single document or all documents in a collection.

Use get() on a document reference to read one document, or get() on a collection reference to read all documents. These return promises that resolve with data snapshots.

Result

Your app receives data objects that you can display or process.

Understanding asynchronous data fetching is key to handling Firestore data smoothly in your app.

5

Intermediate

Updating Existing Documents

🤔Before reading on: do you think updating a document replaces it completely or only changes specified fields? Commit to your answer.

Concept: Learn how to change data in existing documents without overwriting the whole document.

Use update() method on a document reference with only the fields you want to change. This keeps other data intact.

Result

The specified fields in Firestore documents change, reflecting new values in your app.

Partial updates prevent accidental data loss and make your app more efficient.

6

Advanced

Deleting Documents Safely

🤔Before reading on: do you think deleting a document also deletes its subcollections automatically? Commit to your answer.

Concept: Learn how to remove documents and understand Firestore's behavior with nested data.

Use delete() on a document reference to remove it. Note that subcollections are not deleted automatically and require separate handling.

Result

The document disappears from Firestore, but subcollections remain unless explicitly deleted.

Knowing this prevents orphaned data and keeps your database clean.

7

Expert

Handling Errors and Optimizing Performance

🤔Before reading on: do you think Firestore operations always succeed or can they fail due to network or permission issues? Commit to your answer.

Concept: Learn how to handle errors in CRUD operations and optimize data usage for better app performance.

Use try-catch blocks or .catch() on promises to handle errors like permission denied or network failure. Use batched writes or transactions for atomic updates. Limit data reads with queries to reduce costs and improve speed.

Result

Your app gracefully handles failures and runs efficiently with minimal data usage.

Error handling and optimization are crucial for building reliable, user-friendly apps that scale.

Under the Hood

Firestore stores data in a NoSQL cloud database where each document is a JSON-like object. When your app performs CRUD operations, it sends requests over the internet to Firestore servers. Firestore processes these requests asynchronously, ensuring data consistency and security. It uses indexes to quickly find data and supports offline caching to improve user experience.

Why designed this way?

Firestore was designed to be scalable and flexible for mobile and web apps. Its document-based model fits modern app data better than traditional tables. Asynchronous operations keep apps responsive. Offline support and real-time updates were added to meet mobile users' needs. Alternatives like SQL databases were less suited for dynamic, hierarchical data.

┌───────────────┐      ┌───────────────┐      ┌───────────────┐
│ React Native  │ ---> │ Firestore SDK │ ---> │ Firestore DB  │
└───────────────┘      └───────────────┘      └───────────────┘
       │                      │                      │
       │ Async CRUD Calls      │                      │
       │                      │                      │
       │ <--- Data Response ---┘                      │
       │                                             │
       │ <----------- Network & Security ------------┘

Myth Busters - 4 Common Misconceptions

Quick: Does Firestore update() replace the whole document or only specified fields? Commit to your answer.

Common Belief: update() replaces the entire document with new data.

Reality: update() only changes the fields you specify, leaving other fields untouched.

Why it matters: Believing update() replaces everything can cause developers to unintentionally erase data.

Quick: When deleting a document, are its subcollections deleted automatically? Commit to your answer.

Common Belief: Deleting a document also deletes all its subcollections.

Reality: Subcollections remain and must be deleted separately.

Why it matters: Assuming automatic deletion leads to leftover orphaned data, wasting storage and causing confusion.

Quick: Does Firestore CRUD operate synchronously or asynchronously? Commit to your answer.

Common Belief: CRUD operations happen instantly and synchronously.

Reality: All Firestore CRUD operations are asynchronous and return promises.

Why it matters: Ignoring async nature causes bugs like trying to use data before it's loaded.

Quick: Can Firestore generate document IDs automatically when adding data? Commit to your answer.

Common Belief: You must always specify document IDs manually.

Reality: Firestore can auto-generate unique document IDs when adding documents.

Why it matters: Not knowing this leads to unnecessary complexity and risk of ID collisions.

Expert Zone

1

Firestore's batched writes allow grouping multiple CRUD operations into one atomic request, reducing network overhead and ensuring consistency.

2

Using transactions lets you read and write data atomically, which is essential for operations that depend on current data state to avoid race conditions.

3

Firestore indexes every field by default, but complex queries may require custom composite indexes, which must be created manually to avoid errors.

When NOT to use

Firestore CRUD is not ideal for complex relational data with many joins or for heavy analytical queries. In such cases, SQL databases or specialized analytics databases are better. Also, for extremely high write throughput, consider other NoSQL options optimized for that use case.

Production Patterns

In production, developers use Firestore CRUD with real-time listeners to update UI instantly. They combine batched writes and transactions for safe multi-step updates. Security rules tightly control who can perform CRUD operations. Offline persistence is enabled to improve user experience when network is unstable.

Connections

REST API

Firestore CRUD operations are similar to REST API methods POST, GET, PUT/PATCH, DELETE.

Understanding REST helps grasp Firestore CRUD because both follow the create-read-update-delete pattern for managing data.

Database Normalization

Firestore uses a NoSQL document model, which contrasts with normalized relational databases.

Knowing normalization helps understand why Firestore duplicates some data for speed and flexibility, trading off strict relations.

Version Control Systems

Both Firestore CRUD and version control involve managing changes to data over time.

Recognizing this connection helps appreciate the importance of atomic updates and conflict resolution in Firestore.

Common Pitfalls

#1 Trying to update a document without checking if it exists.

Wrong approach:

await firestore().collection('users').doc('user1').update({age: 30});

Correct approach:

const doc = await firestore().collection('users').doc('user1').get();
if (doc.exists) {
await doc.ref.update({age: 30});
} else {
// handle missing document
}

Root cause:

update() fails if the document does not exist; checking existence prevents runtime errors.

#2 Deleting a document and expecting all nested data to be removed automatically.

Wrong approach:

await firestore().collection('users').doc('user1').delete(); // assumes subcollections deleted

Correct approach:

// Must delete subcollections separately
const subcollection = firestore().collection('users').doc('user1').collection('orders');
const snapshot = await subcollection.get();
snapshot.forEach(doc => doc.ref.delete());
await firestore().collection('users').doc('user1').delete();

Root cause:

Firestore does not cascade deletes; subcollections persist unless explicitly removed.

#3 Not handling asynchronous nature of CRUD operations, leading to using data before it's ready.

Wrong approach:

const data = firestore().collection('items').doc('item1').get();
console.log(data.data()); // data is a promise, not actual data

Correct approach:

const doc = await firestore().collection('items').doc('item1').get();
console.log(doc.data());

Root cause:

Forgetting that Firestore methods return promises causes misuse of unresolved data.

Key Takeaways

Firestore CRUD operations let your app create, read, update, and delete data in a cloud database using simple commands.

Understanding Firestore's document and collection structure is essential for targeting data correctly.

All Firestore operations are asynchronous and return promises, so handling them properly avoids bugs.

Partial updates with update() change only specified fields, preventing accidental data loss.

Deleting documents does not remove subcollections automatically; you must delete nested data explicitly.