Using these two pieces of state:

this.markerArray = [];
this.arrayLength = 0;

I am trying to use this function:

getMarkers = () => {
  this.dbRef.get().then((snapshot) => {
    snapshot.docs.forEach((marker) => {
      if (!this.markerArray.includes(marker.id)) {
        let currentID = marker.id;
        let appObj = {
          ...marker.data(),
          ["id"]: currentID,
        };
        this.markerArray.push(appObj);
      }
    });

    this.setState({
      markerArray: this.markerArray,
    });
    // (problem code) this.setState({arrayLength: this.markerArray.length})

    return this.markerArray;
  });
};

To update a list of map markers. I am trying to update this.arrayLength when this.markerArray's length changes. I think the problem has to do with setState's asynchronous nature, but I can't figure out what to do with that information.

I have tried:

1. Creating a separate function to set arrayLength
2. Passing that function as a callback when setting markerArray's state
3. Calling the function in Render (infinite loop)
4. Setting arrayLength in the same setState as markerArray
5. Changing the initial value of arrayLength to null, 0, and ''

I have even tried setting arrayLength to an arbitrary number that does not rely on markerArray.length, but it won't update.