5.js"],"Mailchimp"] f:I[4707,[],""] 10:I[6423,[],""] 13:I[1060,[],""] d:T72b, Working with **Firebase Firestore** in a React project is one of the cleanest ways to handle real-time, scalable data. In this post, I’ll show you how I typically fetch data from Firestore and render it in a simple UI using hooks. ## 🧱 Firebase Setup First, make sure Firebase is set up in your project. You can install it via npm: ``` npm install firebase ``` Then, create a Firebase config file: \n Next\n', label: 'Next.js', language: 'js' }, ]} copyButton /> ## 📄 Fetching Data from Firestore Let’s say you have a collection called `tasks`. Here’s a simple component that fetches and renders the data: ```tsx // components/TaskList.tsx import { useEffect, useState } from "react"; import { collection, getDocs } from "firebase/firestore"; import { db } from "../lib/firebase"; const TaskList = () => { const [tasks, setTasks] = useState([]); useEffect(() => { const fetchTasks = async () => { const querySnapshot = await getDocs(collection(db, "tasks")); const data = querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data(), })); setTasks(data); }; fetchTasks(); }, []); return (

Task List

{task.title}

); }; export default TaskList; ``` ## ✅ Final Thoughts Firestore is an excellent choice when you need a quick, reliable backend that works seamlessly with React. Whether it’s a simple to-do list or a more complex dashboard, this setup should get you started fast and clean. Happy coding! 14:[]