Reading data (once and listener) in Firebase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

Difference between once() and on() in Firebase Realtime Database

Which option correctly describes the behavior of once() compared to on() when reading data from Firebase Realtime Database?

A <code>once()</code> keeps listening for data changes; <code>on()</code> reads data only once.

B <code>once()</code> reads data only once and then stops listening; <code>on()</code> keeps listening for data changes.

C <code>once()</code> and <code>on()</code> both read data only once and then stop.

D <code>once()</code> and <code>on()</code> both keep listening for data changes indefinitely.

💡 Hint

Think about whether the method keeps watching for updates or just fetches data a single time.

once() fetches data a single time and then stops listening. on() sets up a continuous listener that triggers every time data changes.

❓ Configuration

intermediate

Correct usage of once() to read data once

Which code snippet correctly reads data once from Firebase Realtime Database and logs the value?

Firebase

const dbRef = firebase.database().ref('users/user1');

A dbRef.once('value').then(snapshot => console.log(snapshot.val()));

B dbRef.get('value').then(snapshot => console.log(snapshot.val()));

C dbRef.once('value', snapshot => console.log(snapshot.val()));

D dbRef.on('value', snapshot => console.log(snapshot.val()));

💡 Hint

Check the method that returns a promise and reads data once.

once() returns a promise that resolves with the data snapshot. Passing a callback directly is deprecated. on() sets a listener. get() is a newer method but requires no event type argument.

❓ Architecture

advanced

Choosing between once() and on() for a chat app

You are designing a chat app that shows messages and updates them live. Which approach is best for reading messages?

A Use <code>on()</code> to listen for new messages and update the UI live.

B Use <code>once()</code> repeatedly every few seconds to simulate live updates.

C Use <code>once()</code> to read messages once when the chat opens, then refresh manually.

D Use <code>on()</code> only for the first message, then switch to <code>once()</code>.

💡 Hint

Think about how to keep the chat updated automatically.

on() sets a live listener that updates the UI whenever new messages arrive, which is ideal for chat apps. once() reads data only once and would not update automatically.

❓ security

advanced

Security implications of using on() listeners

What is a key security consideration when using on() listeners in Firebase Realtime Database?

A Listeners only fetch data once, so they have no security impact.

B Listeners automatically encrypt data, so no extra security is needed.

C Listeners can expose data continuously, so rules must restrict read access properly.

D Listeners disable Firebase security rules while active.

💡 Hint

Consider how continuous data access affects security.

on() listeners keep data flowing to clients, so Firebase security rules must carefully control who can read data to prevent leaks.

✅ Best Practice

expert

Proper cleanup of on() listeners to avoid memory leaks

Which code snippet correctly removes a Firebase Realtime Database on() listener to prevent memory leaks?

Firebase

const dbRef = firebase.database().ref('users/user1');
function startListening() {
  dbRef.on('value', callback);
}
function stopListening() {
  // What goes here?
}

A dbRef.removeListener('value', callback);

B dbRef.unsubscribe('value', callback);

C dbRef.stop('value', callback);

D dbRef.off('value', callback);

💡 Hint

Check the Firebase method to remove listeners.

off() is the correct method to remove listeners added by on(). Other methods do not exist or cause errors.

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