Real-time listeners (onSnapshot) in Firebase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

Understanding onSnapshot real-time updates

What happens when you attach an onSnapshot listener to a Firestore document?

Choose the correct behavior of the listener.

Firebase

const unsub = docRef.onSnapshot(doc => {
  console.log(doc.data());
});

A The listener fetches the document once and then stops listening.

B The listener triggers only if the document does not exist.

C The listener only triggers when the document is deleted.

D The listener fetches the document initially and then listens for real-time updates, triggering the callback on every change.

💡 Hint

Think about what 'real-time' means in Firestore listeners.

The onSnapshot listener first fetches the current document data and then listens for any changes. It triggers the callback every time the document updates, providing real-time updates.

❓ Configuration

intermediate

Properly detaching an onSnapshot listener

Given the following code, what is the correct way to stop listening to real-time updates?

const unsubscribe = docRef.onSnapshot(snapshot => {
  console.log(snapshot.data());
});

Choose the correct way to detach the listener.

Firebase

const unsubscribe = docRef.onSnapshot(snapshot => {
  console.log(snapshot.data());
});

A Call <code>docRef.offSnapshot()</code> to stop listening.

B Set <code>unsubscribe = null</code> to stop listening.

C Call <code>unsubscribe()</code> when you want to stop listening.

D Listeners stop automatically after 5 minutes; no action needed.

💡 Hint

Remember the function returned by onSnapshot.

The onSnapshot method returns a function that, when called, detaches the listener. Calling unsubscribe() stops the real-time updates.

❓ Architecture

advanced

Designing efficient real-time updates for a chat app

You are building a chat app using Firestore. You want to listen to new messages in a chat room in real-time but avoid unnecessary data usage and costs.

Which approach is best to achieve this?

A Fetch all messages once with <code>get()</code> and poll every 10 seconds for new messages.

B Attach an <code>onSnapshot</code> listener to a query that fetches only the latest 50 messages ordered by timestamp.

C Attach an <code>onSnapshot</code> listener to the entire <code>messages</code> collection and filter messages client-side.

D Attach multiple <code>onSnapshot</code> listeners to each message document individually.

💡 Hint

Think about limiting data and using queries.

Listening to a query that limits results (e.g., latest 50 messages) reduces data transfer and costs. It also keeps updates efficient by only sending relevant changes.

❓ security

advanced

Security rules impact on onSnapshot listeners

You have an onSnapshot listener on a Firestore collection. If a user does not have read permission for some documents, what will happen?

A The listener will only receive documents the user has permission to read; others are filtered out.

B The listener will receive all documents regardless of permissions.

C The listener will fail with a permission error and stop listening.

D The listener will receive documents but with empty data for unauthorized ones.

💡 Hint

Consider how Firestore security rules filter data.

Firestore security rules filter data before sending it to the client. The listener only receives documents the user is allowed to read. Unauthorized documents are not sent at all.

🧠 Conceptual

expert

Behavior of onSnapshot with offline persistence enabled

When Firestore offline persistence is enabled, what is the behavior of an onSnapshot listener when the device is offline?

A The listener immediately triggers with cached data and waits for online updates.

B The listener does not trigger until the device is back online.

C The listener triggers only once and then stops.

D The listener triggers with empty data and errors out.

💡 Hint

Think about offline support and cached data.

With offline persistence, Firestore caches data locally. The onSnapshot listener triggers immediately with cached data, allowing the app to work offline, then updates when online.