I'm currently using React and Next.js in conjunction with Firestore. As I fetch data from Firebase on one page using useEffect once the page is rendered, I've noticed that the read operation can be resource-intensive. To avoid unnecessary fetching of the same data when the user navigates between pages, I am looking for a way to persist the fetched data so it doesn't need to be retrieved repeatedly. Any suggestions on how I can achieve this would be greatly appreciated. Thank you!
useEffect(() => {
var newObj = {};
FB.getAllFiles()
.then((snapshot) => {
snapshot.forEach((doc) => {
const data = doc.data();
newObj[data["name"]] = data["count"];
});
})
.then(() => {
setCounts(newObj);
})
.catch((e) => console.log(e));
}, []);