Design webpage to minimize Google Firestore requests in ReactJS

Question

I am working with ReactJS and Google Firestore. I have a component called GameEntryForm, where you can select from a list of users stored in Firestore. In order to get this list, when I render the GameEntryForm component, I make a query to Firestore. Below is how I am getting the list.

I was wondering if there was a better or faster way to do this. My concern is that as the number of users increases, this could be a slow operation.

function GameEntryForm() {
// prevent rendering twice
const effectRan = useRef(false);
const [usersList, setUsersList] = useState(new Map());

  useEffect(() => {
    if (effectRan.current === false) {
      const getUsers = async () => {
        const q = query(collection(firestore, "users"));
        const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
          setUsersList(new Map(usersList.set(doc.data().uid, doc.data())));
        });
      };
      getUsers();
      return () => {
        effectRan.current = true;
      };
    }
  }, []);
}

I don't understand the problem. Firestore does allow empty (non-existent) collections. If you query one such collection, it will simply return no results. Certainly you can detect that case and work with it. I'm not sure how "globally sharing a list" would help (or what that phrase means). If you have code that isn't working the way you expect, please edit the question to share that and explain in more detail what the problem is. — Doug Stevenson, Dec 24 '22 at 05:00
@DougStevenson I would first like to know if there is a more efficient way to get a list of users than querying it every time I render the page. If so, how would you go about doing this? — Jay, Dec 24 '22 at 05:16
Can you elaborate your question in more descriptive way using any code snippets OR what are you trying to achieve in where, on which line so this will narrow down the answer perspective you can go through [this link](https://stackoverflow.com/help/how-to-ask) to understand what I mean to say — Rohit Kharche, Dec 26 '22 at 14:56
@RohitKharche I edited the post and tried to make the question clearer along with adding code. — Jay, Dec 26 '22 at 20:39
Did you try to learn how to use Firebase? Firebase has functionality you are looking for. — Mises, Dec 26 '22 at 21:27

score 1 · Answer 1 · answered Dec 27 '22 at 10:19

Your code looks fine at first glance, but here are many ways to mitigate this issue some of them are as follows:

Implement Pagination Functionality to limit the number of documents that are returned by the query, for more about this topic go through this docs
Use Firestore Offline Caching feature through persistence like one provided here. I understand that your user will be added constantly so there’s not much improvement with this method but you can trigger a new request to the db based on the changed type. This is nicely explained in this thread
You can also use the above caching with a global state management solution(Redux, Context API) and only fetch the list of users once. This way, the list of users would be accessible to all components that need it, and you would only have to make the query once. Someone has created an example for how this will work although not using firestore though.
Last but not least use Real Time lister to View changes between snapshots as provide here in official docs This works great with the offline Caching option.

Design webpage to minimize Google Firestore requests in ReactJS

1 Answers1