How can I render my data after I add/delete anything on firestore without refreshing the page

Question

I'm using react js & to store the data I'm using firebase, so whenever I add or delete something from firestore it won't reflect on my page without reloading the entire page

How can I reflect that changed data without refreshing the page?

Can someone help me please?

I've written the code in firebase service page to get all the data & update it & I'm calling that function in my other page where I need that function

So now my function works, but now it won't reflect on page without reloading the entire page

Answer 1

You can listen to document changes using onSnapshot

For more information https://firebase.google.com/docs/firestore/query-data/listen

import { onSnapshot, collection } from "firebase/firestore";

onSnapshot(collection(db, "YourCollectionName"), (snapshot) => {

 //snapshot.docs will contain the realtime updated changes
 console.log("new data" snapshot.docs)
});