Which React Hook to Use with Firestore onsnapshot?

The behavior you’re encountering, where the state appears empty consistently, can be attributed to the asynchronous nature of state updates in React.

In the context of the onSnapshot callback, capturing the state immediately before an update is not straightforward due to the timing of state updates. React batches these updates and may not have applied the update before the console.log statement is executed.

However, you can access the previous data stored in the state in a reliable manner using the following approach:

import { useEffect, useState } from 'react';
import { collection, onSnapshot } from 'firebase/firestore'; // Import Firestore functions from Firebase

// Define the Firestore collection reference
const dataCollectionRef = collection(db, 'data'); // Replace 'db' with your Firestore instance

function YourComponent() {

  const [testData, setTestData] = useState([]);
  useEffect(() => {
    // Create a function to handle updates and unsubscribe from the listener when the component unmounts
    const unsubscribe = onSnapshot(dataCollectionRef, (snapshot) => {
      // Process the data from the Firestore snapshot
      const newData = snapshot.docs.map((doc) => doc.data());
      // Update the component state with the new data
      setTestData((prevData) => [...prevData, ...newData]);
    });
    // Clean up the listener when the component unmounts
    return () => unsubscribe();
  }, []); // The empty dependency array ensures the effect runs only once