Object is possibly null using "useEffect"

Question

I'm trying to set bounds using GoogleMaps and am getting the "Object is possibly null" error even while doing error checks.

The background is I'm trying to move the map to my markers on a state change and increase the bounds to show all the markers.

Other related articles like adding null checks have not been fruitful in fixing this error.

  const [map, setMap] = React.useState(null)
  const [loc, setLoc] = React.useState({lat: 0, lng: 0})
  const [stores, setStores] = React.useState([])


  const onLoad = React.useCallback(function callback(map) {
    navigator.geolocation.getCurrentPosition((position) => { 
      console.log("Got position", position.coords);
      setLoc({
        lat: position.coords.latitude,
        lng: position.coords.longitude
      });

    });
    setMap(map)
  }, [])

  useEffect(() => {
    if (stores && map !== null) {
      const bounds = new window.google.maps.LatLngBounds();
      stores.forEach(store => {
        const latlng = new google.maps.LatLng(
          //Get Lat
          //Get Lon
        );
        bounds.extend(latlng)
      });
      map.fitBounds(bounds);
    }
  }, []);
...
  return (
    <LoadScript
      googleMapsApiKey="AIzaSyDTd3ejyeGgdFBOZvaqwoa_7U2e2EJMc1w"
    >
      <Input/>
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={loc}
        zoom={10}
        onLoad={onLoad}
        onUnmount={onUnmount}
      >
...

Am I using "useEffect" correct to update the bounds on the map whenever the state changes? I want to update the map's bounds whenever the "stores" variable changes

Answer 1

You are not using useEffect correct manner, useEffect should have all the changing variable in it's dependency array in the second argument. And same thing goes with the useCallback, it is all expecting the list of variables which are going to change to understand when they have to call the inner function again.

You can add exhaustive-deps lint rule to throw warning in dev mode.

const onLoad = React.useCallback(function callback(map) {
  navigator.geolocation.getCurrentPosition((position) => {
    console.log("Got position", position.coords);
    setLoc({
      lat: position.coords.latitude,
      lng: position.coords.longitude,
    });
  });
  setMap(map);
}, [map]);

useEffect(() => {
  if (stores && map !== null) {
    const bounds = new window.google.maps.LatLngBounds();
    stores.forEach((store) => {
      const latlng = new google.maps.LatLng();
      //Get Lat
      //Get Lon
      bounds.extend(latlng);
    });
    map.fitBounds(bounds);
  }
}, [map, stores]);