Reading data (once and listener) in Firebase - Mini Project: Build & Apply

Reading data (once and listener)

📖 Scenario: You are building a simple app that shows user profiles stored in Firebase Realtime Database. You want to read the user data once to display it initially, and then listen for any changes to update the display automatically.

🎯 Goal: Learn how to read data once from Firebase Realtime Database and set up a listener to get real-time updates.

📋 What You'll Learn

Create a reference to the Firebase Realtime Database path /users/user1

Read the data once from the reference

Set up a listener to listen for changes at the reference

Handle the data snapshot correctly in both cases

💡 Why This Matters

🌍 Real World

Reading data once is useful for initial data loads, while listeners keep your app updated in real time, like chat apps or live dashboards.

💼 Career

Understanding how to read and listen to Firebase data is essential for building responsive cloud-connected applications.

1

Create a Firebase database reference

Create a variable called userRef that references the Firebase Realtime Database path /users/user1 using firebase.database().ref().

Firebase

# Create a Firebase database reference to '/users/user1'
# Your code here

Hint

Use firebase.database().ref('/users/user1') to get the reference.

2

Read data once from the reference

Use the userRef variable and call once('value') to read the data once. Add a callback function that receives a snapshot parameter.

Firebase

const userRef = firebase.database().ref('/users/user1');
// Read data once from userRef
// Your code here

Hint

Use userRef.once('value').then(callback) and inside the callback get data with snapshot.val().

3

Set up a listener for real-time updates

Use the userRef variable and call on('value') to listen for changes. Add a callback function that receives a snapshot parameter.

Firebase

const userRef = firebase.database().ref('/users/user1');
userRef.once('value').then((snapshot) => {
  const userData = snapshot.val();
});
// Set up a listener for real-time updates
// Your code here

Hint

Use userRef.on('value', callback) to listen for data changes.

4

Stop listening to data changes

Call userRef.off('value') to stop listening for changes on the userRef reference.

Firebase

const userRef = firebase.database().ref('/users/user1');
userRef.once('value').then((snapshot) => {
  const userData = snapshot.val();
});
userRef.on('value', (snapshot) => {
  const updatedUserData = snapshot.val();
});
// Stop listening to data changes
// Your code here

Hint

Use userRef.off('value') to remove the listener.

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