firebase - React hooks with firestore data - 1.1k reads in 30 seconds (from 2 collections with 3 documents with 2 attributes)

Question

I'm trying to understand how the Cloud Firestore read quota works. I have read this post and the response to it. My console was open, but I cannot construe how a single collection with 3 documents, each having 2 attributes constitutes a "busy console".

I'm struggling to make sense of the documentation.

I have two collections in firestore. Each one has 3 documents. Each document has 2 attributes. I'm using those attributes to populate options in the Autocomplete select menu from Material UI.

In localhost, I have been running the form to test getting those attributes into an Autocomplete select menu, using a single snapshot. In 30 seconds, these two form items produced 1.1k reads in firestore.

I thought:

1. snapshot only updated when data in firestore changed.

2. that by using unsubscribe, then the hook would stop listening for changes in firestore.

3. efficiency of the firestore read was improved by adding the state of the list as a dependency to the hook (the orgList at the end of the useEffect block): https://medium.com/javascript-in-plain-english/firebase-firestore-database-realtime-updates-with-react-hooks-useeffect-346c1e154219.

Can anyone see how 1.1k reads are being generated by running this form with 2 input items only (there are no other firestore calls in the whole app at the moment).

import React, { useState, useEffect } from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '@material-ui/icons/CheckBox';
import firebase from "../../../../../firebase";

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;

export default function CheckboxesTags() {
  const [orgList, setOrgList] = useState([]);
  const [selectedOrgList, setSelectedOrgList] = useState();
  const [loading, setLoading ] = useState(true);
  const [ error, setError ] = useState(false);

  useEffect(() => {
    // if (doc.exists) {
      const unsubscribe = firebase
        .firestore()
        .collection("organisations")
        .onSnapshot((snapshot) => {
          const orgList = snapshot.docs.map((doc) => ({
            id: doc.id,
            shortName: doc.data().shortName,
            location: doc.data().location
          }));
          setOrgList(orgList);
          console.log("orglist", orgList)
        }, () => {
          setError(true)
        });
        setLoading(false);
        return() => unsubscribe();
     
    
  }, [orgList]);


   

  return (
      <div>
      
        <Autocomplete
        multiple
        id="orgList options"
        options={orgList}
        disableCloseOnSelect
        getOptionLabel={(option) => option.shortName}
        renderOption={(orgList, { selected }) => (
            <React.Fragment>
            <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 8 }}
                checked={selected}
            />
            {orgList.shortName}  <span style={{marginRight: "4px", marginLeft: "4px"}}>-</span>
            {orgList.location}
            </React.Fragment>
        )}
        style={{ width: 500 }}
        renderInput={(params) => (
            <TextField {...params} 
            variant="outlined" 
            label="Select Organisation" 
            placeholder="Acme Inc." 
          />
        )}
        />
    </div>
  );
}

The other form is exactly like this, but instead of orgList - it has userList. Otherwise - it's all the same (so: 2 collections, 3 documents in each collection, 2 attributes in each document).

Answer 1

Waitting for answers