Realtime Database in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Displaying Realtime Data Updates

You have a React Native app connected to Firebase Realtime Database. Which code snippet correctly listens for changes to the 'messages' node and updates the state to display new messages in real time?

React Native

import { useEffect, useState } from 'react';
import { database } from './firebaseConfig';
import { ref, onValue } from 'firebase/database';

function Messages() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const messagesRef = ref(database, 'messages');
    const unsubscribe = onValue(messagesRef, (snapshot) => {
      const data = snapshot.val();
      if (data) {
        setMessages(Object.values(data));
      } else {
        setMessages([]);
      }
    });
    return () => unsubscribe();
  }, []);

  return null;
}

A

useEffect(() => {
  const messagesRef = ref(database, 'messages');
  const unsubscribe = onValue(messagesRef, (snapshot) => {
    setMessages(snapshot.val());
  });
  return () => unsubscribe();
}, []);

B

useEffect(() => {
  const messagesRef = ref(database, 'messages');
  const unsubscribe = onValue(messagesRef, (snapshot) => {
    const data = snapshot.val();
    if (data) {
      setMessages(Object.values(data));
    } else {
      setMessages([]);
    }
  });
  return () => unsubscribe();
}, []);

C

useEffect(() => {
  const messagesRef = ref(database, 'messages');
  onValue(messagesRef, (snapshot) => {
    setMessages(snapshot.val());
  });
}, []);

D

useEffect(() => {
  const messagesRef = ref(database, 'messages');
  const unsubscribe = onValue(messagesRef, (snapshot) => {
    const data = snapshot.val();
    setMessages(data ? Object.keys(data) : []);
  });
  return () => unsubscribe();
}, []);

💡 Hint

Remember to convert the snapshot object to an array of values before setting state.

Option B correctly listens to the 'messages' node, converts the snapshot object to an array using Object.values, and cleans up the listener on unmount. Option B does not clean up the listener and sets state directly with the object, which may cause issues. Option B returns unsubscribe directly without wrapping in a function, which is incorrect. Option B sets state to keys instead of values, which is not the expected message list.

🧠 Conceptual

intermediate

Understanding Realtime Database Data Structure

In Firebase Realtime Database, why is it recommended to structure data as a flat JSON tree rather than deeply nested objects?

A Because flat structures reduce the chance of data duplication and improve query performance.

B Because deeply nested objects are automatically converted to flat structures by Firebase.

C Because flat structures allow simultaneous writes to multiple unrelated nodes in one operation.

D Because Firebase Realtime Database does not support nested objects at all.

💡 Hint

Think about how Firebase downloads and listens to data changes.

Option A is correct because flat data structures reduce data duplication and make queries more efficient. Firebase downloads entire nodes, so deeply nested data can cause large downloads and slow updates. Option A is false; Firebase stores data as you provide it. Option A is incorrect; simultaneous writes require multi-location updates but are unrelated to flattening. Option A is false; Firebase supports nested objects but it's not recommended.

❓ lifecycle

advanced

Cleaning Up Firebase Listeners in React Native

What is the correct way to remove a Firebase Realtime Database listener in a React Native functional component to avoid memory leaks?

React Native

useEffect(() => {
  const refMessages = ref(database, 'messages');
  const unsubscribe = onValue(refMessages, (snapshot) => {
    // update state
  });
  // What should be returned here?
}, []);

A return () => onValue(refMessages, null);

B return unsubscribe;

C return () => unsubscribe();

D No return needed; Firebase cleans up automatically.

💡 Hint

React expects a cleanup function from useEffect to run on unmount.

Option C correctly returns a function that calls unsubscribe to remove the listener. Option C returns the unsubscribe function itself, which React will call with no arguments, causing an error. Option C tries to remove listener by passing null callback, which is invalid. Option C is false; listeners must be removed manually to prevent leaks.

📝 Syntax

advanced

Correct Syntax for Writing Data to Realtime Database

Which code snippet correctly writes a new message object to the 'messages' node in Firebase Realtime Database using React Native?

React Native

import { ref, push, set } from 'firebase/database';

function sendMessage(database, message) {
  // Fill in the code
}

A set(ref(database, 'messages'), message);

B

const messagesRef = ref(database, 'messages');
push(messagesRef, message);

C

const newMessageRef = push(ref(database, 'messages'));
set(newMessageRef, message);

D

const messagesRef = ref(database, 'messages');
const newMessageRef = push(messagesRef);
set(newMessageRef, message);

💡 Hint

Use push(ref) to generate a new child reference with a unique key, then set(newRef, message) to write the data.

Option D is correct because it creates a reference to 'messages', uses push() to generate a unique child key reference, and sets the message data with set(). This adds a new message atomically without overwriting existing data. Option D overwrites the entire 'messages' node. Option D is functionally equivalent but creates the ref inline in push(). Option D incorrectly passes the value to push(), which is invalid in the modular SDK (push(ref) returns a new ref; value is set separately).

🔧 Debug

expert

Debugging Missing Realtime Updates in React Native

A React Native app using Firebase Realtime Database does not update the UI when data changes, even though the database has new data. Which is the most likely cause?

A The onValue listener callback updates state with snapshot.val() but the state variable is not used in the render function.

B The onValue listener is set up inside useEffect but the cleanup function removes it immediately after setup.

C The database rules prevent read access, so onValue never triggers.

D The app uses onChildAdded instead of onValue, so it only listens for new children, not updates.

💡 Hint

Check if the state updated by the listener is actually used to render UI.

Option A is correct because if the state updated by the listener is not used in the UI, changes won't appear. Option A would cause no updates at all, but usually the listener wouldn't be set up properly. Option A would cause no data to be received, but the question states database has new data. Option A listens only for new children, but updates to existing data won't trigger UI changes.