How can I use React Firebase Hooks for data fetching?

How can I use React Firebase Hooks for data fetching?

You can use the useFirestore and useFirestoreCollection hooks from React Firebase Hooks to fetch data easily.

Can you show me a code example?

Sure! Here's a simple example:

import { useFirestoreCollection } from 'react-firebase-hooks/firestore';
import { firestore } from './firebase';

const MyComponent = () => {
  const [value, loading, error] = useFirestoreCollection(
    firestore.collection('myCollection')
  );

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {value.docs.map(doc => (
        <li key={doc.id}>{doc.data().name}</li>
      ))}
    </ul>
  );
};

This will fetch and display documents from 'myCollection'.

What if I want to filter the data?

You can use Firestore queries to filter data. For example:

const query = firestore.collection('myCollection').where('active', '==', true);
const [value, loading, error] = useFirestoreCollection(query);

This will fetch only the documents where the 'active' field is true.