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.

Practice

1. What is the main purpose of using on('value') in React Native with Realtime Database?

easy

A. To write new data to the database

B. To delete data from the database

C. To listen for live updates to data changes

D. To stop listening to data changes

Solution

1. Step 1: Understand the on('value') method

   This method sets up a listener that triggers every time the data at the reference changes.

2. Step 2: Identify the purpose in app behavior

   It keeps the app data synced live by updating the UI or state whenever data changes.

3. Final Answer:

   To listen for live updates to data changes -> Option C

4. Quick Check:

   on('value') listens for updates [OK]

Hint: Remember: 'on' means listen for live data changes [OK]

Common Mistakes:

• Confusing 'on' with writing data
• Thinking it deletes data
• Assuming it stops listeners

2. Which of the following is the correct way to create a reference to the 'users' node in Firebase Realtime Database in React Native?

easy

A. const usersRef = database().ref('users');

B. const usersRef = database.ref('users');

C. const usersRef = database().reference('users');

D. const usersRef = database().child('users');

Solution

1. Step 1: Recall the correct method to get a reference

   In React Native Firebase, database() returns the database instance, and ref('path') creates a reference.

2. Step 2: Check each option's syntax

   const usersRef = database().ref('users'); uses database().ref('users') which is correct. const usersRef = database.ref('users'); misses parentheses after database. const usersRef = database().reference('users'); uses a wrong method name. const usersRef = database().child('users'); uses child which is valid but requires a reference first.

3. Final Answer:

   const usersRef = database().ref('users'); -> Option A

4. Quick Check:

   Use database().ref('path') for references [OK]

Hint: Use parentheses after database and then call ref() [OK]

Common Mistakes:

• Omitting parentheses after database
• Using wrong method names like reference()
• Confusing ref() with child() without base ref

3. Given the code below, what will be logged when the data at 'messages' changes?

const messagesRef = database().ref('messages');
messagesRef.on('value', snapshot => {
  console.log(snapshot.val());
});

medium

A. An error message because 'val()' is invalid

B. The current value of 'messages' node as a JavaScript object

C. A function reference to the listener

D. Nothing, because 'on' does not trigger automatically

Solution

1. Step 1: Understand what snapshot.val() returns

   It returns the current data stored at the reference as a JavaScript object or value.

2. Step 2: Analyze the listener behavior

   The on('value') listener triggers immediately with current data and on every change, so it logs the current 'messages' data.

3. Final Answer:

   The current value of 'messages' node as a JavaScript object -> Option B

4. Quick Check:

   snapshot.val() returns data [OK]

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

Common Mistakes:

• Thinking on() returns a function
• Believing val() is invalid
• Assuming on() does not trigger immediately

4. What is wrong with the following React Native code snippet using Realtime Database?

const ref = database().ref('items');
ref.on('value', snapshot => {
  setItems(snapshot.val());
});

// Later in component unmount
ref.off('value');

medium

A. ref.off('value') should be called before on('value')

B. The ref is incorrectly created without parentheses

C. setItems cannot be called inside on('value')

D. The listener is not properly removed because off() needs the callback function

Solution

1. Step 1: Understand how to remove listeners

   To remove a specific listener, off('value', callback) must be called with the same callback function used in on.

2. Step 2: Identify the problem in the code

   The code calls off('value') without the callback, so the listener remains active, causing potential memory leaks.

3. Final Answer:

   The listener is not properly removed because off() needs the callback function -> Option D

4. Quick Check:

   off() requires callback to remove listener [OK]

Hint: Always pass the same callback to off() to stop listeners [OK]

Common Mistakes:

• Calling off() without callback removes nothing
• Confusing ref creation syntax
• Thinking setItems can't be called inside listener

5. You want to display a live list of chat messages in your React Native app using Realtime Database. Which approach correctly ensures the listener is cleaned up to avoid memory leaks?

hard

A. Use useEffect hook to attach on('value') listener and return a cleanup function that calls off('value', callback)

B. Attach on('value') listener outside the component and never remove it

C. Call off('value') immediately after on('value') inside the same function

D. Use once('value') instead of on('value') to get live updates

Solution

1. Step 1: Understand React Native lifecycle with listeners

   Listeners should be attached when component mounts and removed when it unmounts to avoid leaks.

2. Step 2: Use useEffect for setup and cleanup

   Inside useEffect, attach the listener and return a cleanup function that calls off with the same callback.

3. Step 3: Evaluate other options

   Attach on('value') listener outside the component and never remove it leaks memory. Call off('value') immediately after on('value') inside the same function removes listener immediately, so no updates. Use once('value') instead of on('value') to get live updates only fetches once, not live updates.

4. Final Answer:

   Use useEffect hook to attach on('value') listener and return a cleanup function that calls off('value', callback) -> Option A

5. Quick Check:

   Attach listeners in useEffect and clean up with off() [OK]

Hint: Attach listeners in useEffect and clean up on unmount [OK]

Common Mistakes:

• Not removing listeners causing memory leaks
• Removing listener immediately after adding
• Using once() instead of on() for live data