Reading data (once and listener) in Firebase - Step-by-Step Execution

Process Flow - Reading data (once and listener)

Start

↓

Choose read method

↓

Read Once

↓

Fetch data

↓

Return data

↓

End

You start by choosing to read data once or listen continuously. Reading once fetches data a single time and ends. Listening attaches a listener that waits and updates whenever data changes.

Execution Sample

Firebase

const dbRef = ref(database, 'users/123');

// Read once
get(dbRef).then(snapshot => {
  if (snapshot.exists()) console.log(snapshot.val());
});

// Listener
onValue(dbRef, snapshot => {
  console.log(snapshot.val());
});

This code reads user data once and also sets a listener to log updates continuously.

Process Table

Step	Action	Method	Data State	Output/Effect
1	Create reference to 'users/123'	N/A	Reference created	Ready to read or listen
2	Call get() to read once	Read Once	Fetching data snapshot	Waiting for data
3	Data fetched successfully	Read Once	{name: 'Alice', age: 30}	Logs data once: {name: 'Alice', age: 30}
4	Call onValue() to attach listener	Listener	Listening for changes	Listener active, initial callback logs: {name: 'Alice', age: 30}
5	Data changes on server	Listener	{name: 'Alice', age: 31}	Listener callback logs updated data
6	Data changes again	Listener	{name: 'Alice', age: 32}	Listener callback logs updated data
7	Stop reading once (done)	Read Once	No further action	No more output from get()
8	Listener keeps running	Listener	Waiting for changes	Logs updates on each change

💡 Read once ends after data is fetched; listener stays active until explicitly removed.

Status Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
dbRef	undefined	Reference to 'users/123'	Reference unchanged	Reference unchanged	Reference unchanged	Reference unchanged	Reference unchanged
snapshot	undefined	Pending	{name: 'Alice', age: 30}	{name: 'Alice', age: 30}	{name: 'Alice', age: 31}	{name: 'Alice', age: 32}	Listener snapshot latest
listenerActive	false	false	false	true	true	true	true

Key Moments - 3 Insights

Why does the 'get' method only log data once and not update on changes?

Because 'get' fetches data a single time and then stops, as shown in execution_table rows 2-3 and 7.

How does the listener know when data changes?

The listener waits actively for changes and triggers the callback each time data updates, as seen in rows 4-6.

Can the listener stop automatically after some time?

No, the listener stays active until you explicitly remove it; it does not stop by itself, shown in row 8.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the listener first log updated data?

A Step 5

B Step 2

C Step 3

D Step 7

💡 Hint

Check the 'Output/Effect' column for when listener logs updated data.

According to variable_tracker, what is the value of 'listenerActive' after step 4?

A false

B true

C undefined

D null

💡 Hint

Look at the 'listenerActive' row and the column 'After Step 4'.

If the data never changes after attaching the listener, what happens according to the execution table?

A Listener logs data repeatedly

B Listener never logs any data

C Listener stays active but no new logs after initial attach

D Listener stops automatically

💡 Hint

See row 8 about listener behavior when no data changes occur.

Concept Snapshot

Reading data from Firebase Realtime Database:
- Use get(ref) to read data once; returns a snapshot and stops.
- Use onValue(ref, callback) to listen for data changes continuously.
- get() fetches current data only; onValue() triggers callback on every update.
- Listener stays active until removed; get() ends after one fetch.
- Use snapshot.exists() to check if data is present before reading.

Full Transcript

This lesson shows how to read data from Firebase Realtime Database either once or continuously. First, you create a reference to the data location. Then, you can call get() to fetch data a single time, which returns a snapshot you can read. Alternatively, you attach a listener with onValue() that waits and runs a callback every time data changes. The get() method ends after fetching data once, while the listener stays active until you remove it. Variables like the data snapshot and listener status change as data is fetched or updated. Key points include understanding that get() does not update after the first fetch, and listeners keep running to catch changes. The visual quiz tests your understanding of when data is logged and listener state changes.

Practice

1. Which Firebase function should you use to read data only once from the database?

easy

A. onValue()

B. set()

C. get()

D. push()

Solution

1. Step 1: Understand the purpose of get()

   The get() function reads data from Firebase once and returns a promise with the data snapshot.

2. Step 2: Compare with onValue()

   onValue() listens continuously for data changes, not just once.

3. Final Answer:

   get() -> Option C

4. Quick Check:

   Read data once = get() [OK]

Hint: Use get() for one-time reads, not listeners [OK]

Common Mistakes:

• Confusing get() with onValue()
• Using set() which writes data
• Using push() which adds new data

2. Which of the following is the correct syntax to listen for real-time updates on a Firebase database reference ref?

easy

A. onValue(ref, snapshot => { ... })

B. ref.onValue(snapshot => { ... })

C. ref.listen(snapshot => { ... })

D. ref.get().then(snapshot => { ... })

Solution

1. Step 1: Recall the correct onValue usage

   The Firebase real-time listener uses the function onValue(ref, callback) to listen for changes.

2. Step 2: Check other options for syntax errors

   ref.onValue is incorrect because onValue is a standalone function, not a method on ref. ref.get() reads once, and ref.listen does not exist.

3. Final Answer:

   onValue(ref, snapshot => { ... }) -> Option A

4. Quick Check:

   Listener syntax = onValue(ref, callback) [OK]

Hint: Remember: onValue takes ref as first argument [OK]

Common Mistakes:

• Calling onValue as a method on ref
• Using get() for continuous listening
• Using non-existent listen() method

3. What will be logged to the console when the following code runs and the database value at ref is { name: 'Alice' }?

onValue(ref, snapshot => {
  console.log(snapshot.val());
});

medium

A. null

B. undefined

C. Error

D. { name: 'Alice' }

Solution

1. Step 1: Understand onValue callback behavior

   The callback receives a snapshot of the current data at ref. Calling snapshot.val() returns the data object.

2. Step 2: Check the database value

   The database value at ref is { name: 'Alice' }, so snapshot.val() returns this object.

3. Final Answer:

   { name: 'Alice' } -> Option D

4. Quick Check:

   snapshot.val() returns current data [OK]

Hint: Remember: snapshot.val() gives current data [OK]

Common Mistakes:

• Expecting snapshot itself to be data
• Confusing null with empty data
• Assuming an error if data exists

4. Consider this code snippet:

const unsubscribe = onValue(ref, snapshot => {
  console.log(snapshot.val());
});

// Later in the code
unsubscribe();

What is the purpose of calling unsubscribe() here?

medium

A. To fetch data one more time

B. To stop listening for real-time updates

C. To reset the database reference

D. To delete the data at ref

Solution

1. Step 1: Understand the return value of onValue

   onValue returns a function that, when called, stops the listener from receiving further updates.

2. Step 2: Analyze the effect of calling unsubscribe()

   Calling unsubscribe() removes the listener, so no more console logs happen on data changes.

3. Final Answer:

   To stop listening for real-time updates -> Option B

4. Quick Check:

   Calling unsubscribe stops listener [OK]

Hint: Call unsubscribe to stop real-time listeners [OK]

Common Mistakes:

• Thinking unsubscribe fetches data
• Confusing unsubscribe with data deletion
• Assuming unsubscribe resets reference

5. You want to read user profile data once and then listen for any updates to the user's status in real-time. Which code snippet correctly implements this using Firebase?

hard

A. get(userRef).then(snapshot => {
console.log(snapshot.val());
});
onValue(statusRef, snapshot => {
console.log('Status:', snapshot.val());
});

B. onValue(userRef, snapshot => {
console.log(snapshot.val());
});
get(statusRef).then(snapshot => {
console.log('Status:', snapshot.val());
});

C. get(userRef).then(snapshot => {
console.log(snapshot.val());
});
get(statusRef).then(snapshot => {
console.log('Status:', snapshot.val());
});

D. onValue(userRef, snapshot => {
console.log(snapshot.val());
});
onValue(statusRef, snapshot => {
console.log('Status:', snapshot.val());
});

Solution

1. Step 1: Read user profile data once

   Use get(userRef) to read the profile data once and log it.

2. Step 2: Listen for real-time updates on user status

   Use onValue(statusRef, callback) to listen continuously for status changes.

3. Step 3: Verify other options

   onValue(userRef, snapshot => {
     console.log(snapshot.val());
   });
   get(statusRef).then(snapshot => {
     console.log('Status:', snapshot.val());
   });

   reverses the roles, reading status once and listening to profile continuously, which is incorrect.

   get(userRef).then(snapshot => {
     console.log(snapshot.val());
   });
   get(statusRef).then(snapshot => {
     console.log('Status:', snapshot.val());
   });

   reads both once, no listener.

   onValue(userRef, snapshot => {
     console.log(snapshot.val());
   });
   onValue(statusRef, snapshot => {
     console.log('Status:', snapshot.val());
   });

   listens to both continuously, no one-time read.

4. Final Answer:

   Use get() for profile once and onValue() for status listener -> Option A

5. Quick Check:

   One-time read + listener = get() + onValue() [OK]

Hint: Combine get() for once and onValue() for listening [OK]

Common Mistakes:

• Using onValue for both reads
• Using get() for listening
• Mixing up which data needs listening