Reduce firestore reads by saving data locally and comparing it against the data in Firestore?

I currently have a really small web app in which users can make song requests. In Firestore I have a collection called songRequests and every request is a document.

For the admin, I created a dashboard in which he can see the incoming song requests. To try it out I used a onSnapshot listener which correctly shows all requests once the component gets mounted, also when I add a new song it gets added properly and it only reads the newly added document.

The collection currently has around 10 documents and after a refresh, I get 10 full reads, I was wondering if it is possible to save it locally and compare it against the data in the collection to prevent it from reading all of the documents in the collection on every refresh?

    const [songs, setSongs] = useState([]);
  useEffect(() => {

    // getDocuments();

    const unsub = onSnapshot(collection(db, "songrequests"), (snapshot) => {
      snapshot.docChanges().forEach((change) => {
        if (change.type === "added") {
          const newItem = change.doc.data();
          console.log(newItem);
          setSongs((prevState) => [...prevState, newItem]);
        }
      });
    });

    return unsub;
  }, []);