Real-time listeners (onSnapshot) in Firebase - Step-by-Step Execution

Process Flow - Real-time listeners (onSnapshot)

Start Listener

↓

Attach onSnapshot

↓

Wait for Data Changes

↓

Data Change Detected?

No→Keep Listening

Yes↓

Fetch Updated Data

↓

Run Callback Function

↓

Update UI or State

↓

Continue Listening

The listener starts and waits for data changes. When data changes, it fetches updates and runs a callback to update the app, then keeps listening.

Execution Sample

Firebase

const unsubscribe = onSnapshot(docRef, (doc) => {
  console.log("Current data:", doc.data());
});

This code listens to a document and logs its data whenever it changes.

Process Table

Step	Action	Listener State	Data Received	Callback Output
1	Attach onSnapshot listener	Listening	No data yet	No callback run
2	Initial data fetched	Listening	{"name": "Alice", "age": 25}	Logs: Current data: {name: 'Alice', age: 25}
3	Data changes in Firestore	Listening	{"name": "Alice", "age": 26}	Logs: Current data: {name: 'Alice', age: 26}
4	Another data change	Listening	{"name": "Alice", "age": 27}	Logs: Current data: {name: 'Alice', age: 27}
5	Listener unsubscribed	Not listening	No data	No callback run

💡 Listener stops after unsubscribe is called, no longer receives updates.

Status Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5
listenerState	Not listening	Listening	Listening	Listening	Not listening
dataReceived	None	{"name": "Alice", "age": 25}	{"name": "Alice", "age": 26}	{"name": "Alice", "age": 27}	None
callbackOutput	None	Logged data	Logged data	Logged data	None

Key Moments - 3 Insights

Why does the callback run immediately after attaching the listener?

Because onSnapshot fetches the current data right away to give the app the latest state, as shown in step 2 of the execution_table.

What happens if data changes multiple times quickly?

The listener runs the callback each time data changes, updating the app with the newest data, as seen in steps 3 and 4.

How do we stop listening to data changes?

By calling the unsubscribe function returned by onSnapshot, which stops the listener as shown in step 5.

Visual Quiz - 3 Questions

Look at the execution_table, what is the listenerState at step 3?

A Not listening

B Paused

C Listening

D Disconnected

💡 Hint

Check the 'Listener State' column at step 3 in the execution_table.

At which step does the callback first log data?

A Step 2

B Step 5

C Step 1

D Step 4

💡 Hint

Look at the 'Callback Output' column to see when logging starts.

If we never call unsubscribe, what happens to the listenerState after step 4?

A It changes to Not listening

B It stays Listening

C It becomes Paused

D It resets to Start

💡 Hint

Refer to the 'listenerState' row in variable_tracker after step 4.

Concept Snapshot

onSnapshot attaches a real-time listener to Firestore data.
It immediately fetches current data and runs a callback.
Callback runs on every data change to update the app.
Returns an unsubscribe function to stop listening.
Useful for live updates without manual refresh.

Full Transcript

Real-time listeners in Firebase use onSnapshot to watch data changes live. When you attach onSnapshot to a document or collection, it immediately fetches the current data and runs your callback function with that data. Then it keeps listening for any changes. Each time data changes, the callback runs again with the new data. You can stop listening anytime by calling the unsubscribe function returned by onSnapshot. This lets your app stay updated live without needing to refresh manually.

Practice

1. What does the onSnapshot method do in Firebase Firestore?

easy

A. It creates a new Firestore database.

B. It deletes a document from Firestore.

C. It uploads files to Firebase Storage.

D. It listens for real-time updates to data and runs a callback when data changes.

Solution

1. Step 1: Understand the purpose of onSnapshot

   The onSnapshot method is designed to listen for changes in Firestore data in real-time.

2. Step 2: Identify what happens when data changes

   When data changes, onSnapshot runs a callback function to update the app immediately.

3. Final Answer:

   It listens for real-time updates to data and runs a callback when data changes. -> Option D

4. Quick Check:

   onSnapshot = real-time updates listener [OK]

Hint: Remember: onSnapshot = live updates listener [OK]

Common Mistakes:

• Confusing onSnapshot with data deletion
• Thinking onSnapshot uploads files
• Assuming onSnapshot creates databases

2. Which of the following is the correct syntax to start listening to a Firestore collection named users using onSnapshot?

easy

A. db.users.onSnapshot(snapshot => { /* handle data */ });

B. db.collection('users').getSnapshot(snapshot => { /* handle data */ });

C. db.collection('users').onSnapshot(snapshot => { /* handle data */ });

D. db.collection('users').listen(snapshot => { /* handle data */ });

Solution

1. Step 1: Recall Firestore collection access syntax

   Firestore collections are accessed with db.collection('collectionName').

2. Step 2: Confirm the correct method for real-time listening

   The method to listen for real-time updates is onSnapshot, not getSnapshot or listen.

3. Final Answer:

   db.collection('users').onSnapshot(snapshot => { /* handle data */ }); -> Option C

4. Quick Check:

   Correct syntax = collection + onSnapshot [OK]

Hint: Use collection('name').onSnapshot for real-time data [OK]

Common Mistakes:

• Using .users instead of .collection('users')
• Using getSnapshot or listen instead of onSnapshot
• Missing parentheses or arrow function syntax

3. Given the code below, what will be logged if the users collection has two documents with names 'Alice' and 'Bob'?

db.collection('users').onSnapshot(snapshot => {
  snapshot.forEach(doc => {
    console.log(doc.data().name);
  });
});

medium

A. Alice\nBob

B. undefined\nundefined

C. Error: doc.data is not a function

D. No output

Solution

1. Step 1: Understand onSnapshot callback behavior

   The callback receives a snapshot of the collection documents at the time of the update.

2. Step 2: Loop through each document and access data

   Using snapshot.forEach, each document's data is accessed with doc.data(), and the name field is logged.

3. Final Answer:

   Alice\nBob -> Option A

4. Quick Check:

   doc.data().name logs names correctly [OK]

Hint: Use doc.data() inside forEach to get document fields [OK]

Common Mistakes:

• Trying to access doc.name instead of doc.data().name
• Using snapshot.docs without forEach
• Expecting synchronous return instead of callback

4. What is wrong with this code snippet that uses onSnapshot?

const unsubscribe = db.collection('messages').onSnapshot(snapshot => {
  snapshot.forEach(doc => {
    console.log(doc.data().text);
  });
});
// Later in code
unsubscribe();
unsubscribe();

medium

A. Not unsubscribing causes memory leaks.

B. The code is correct and unsubscribing twice is safe.

C. Calling unsubscribe twice causes an error.

D. onSnapshot does not return an unsubscribe function.

Solution

1. Step 1: Understand unsubscribe function from onSnapshot

   The onSnapshot method returns a function to stop listening when called.

2. Step 2: Analyze calling unsubscribe multiple times

   The unsubscribe function is idempotent; calling it more than once is safe and has no effect after the first call.

3. Final Answer:

   The code is correct and unsubscribing twice is safe. -> Option B

4. Quick Check:

   Unsubscribe function safe to call multiple times [OK]

Hint: Unsubscribe() is safe to call multiple times [OK]

Common Mistakes:

• Forgetting to unsubscribe (memory leaks)
• Assuming onSnapshot does not return unsubscribe
• Confusing unsubscribe with data operations

5. You want to listen to a Firestore document settings/config and update your app UI only when the field theme changes. How can you efficiently use onSnapshot to achieve this?

hard

A. Use onSnapshot on the document and inside callback compare previous and current theme values before updating UI.

B. Use onSnapshot on the whole collection settings and update UI on any change.

C. Call get() repeatedly every second to check for changes.

D. Use onSnapshot on the document but update UI without checking field changes.

Solution

1. Step 1: Use onSnapshot on the specific document

   Listening to the exact document settings/config avoids unnecessary updates from other documents.

2. Step 2: Compare previous and current theme values inside callback

   By storing the previous theme value, you can check if it changed before updating the UI, improving efficiency.

3. Final Answer:

   Use onSnapshot on the document and inside callback compare previous and current theme values before updating UI. -> Option A

4. Quick Check:

   Compare field changes inside onSnapshot callback [OK]

Hint: Compare old and new data inside onSnapshot callback [OK]

Common Mistakes:

• Listening to whole collection causing extra updates
• Polling with get() instead of real-time listener
• Updating UI without checking if field changed