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.