mapRef not being updated on load

[nareshbhatia]

Hello react-map-gl community,

I am trying to use a mapRef as a dependency in my useEffect to install geocoders. My code follows this example in the docs. Unfortunately, the mapRef is not being updated even after the map is loaded and hence the useEffect is not triggered. Here's the console output (note that there is no mapRef change after the map is loaded):

mapRef.current null
mapRef.current null
Map loaded

What am I missing? My code is shown below (the full repository is here):

export function ReactMapBuggy() {
  const mapRef = useRef<MapRef | null>(null);

  // Initialize the geocoders
  useEffect(() => {
    console.log('mapRef.current', mapRef.current);
    if (mapRef.current) {
    }
  }, [mapRef]);

  return (
    <div style={{ position: 'relative' }}>
      <div
        className="geocoder"
        id="geocoder-start"
        ref={geocoderContainerRefStart}
      />

      <div
        className="geocoder"
        id="geocoder-end"
        ref={geocoderContainerRefEnd}
      />

      <MapGL
        {...viewport}
        mapStyle="mapbox://styles/mapbox/streets-v11"
        mapboxAccessToken={mapboxgl.accessToken}
        onLoad={() => {
          console.log('Map loaded');
        }}
        onMove={(evt) => {
          handleViewportChange(evt.viewState);
        }}
        ref={mapRef}
        style={{ width: '100%', height: '100vh' }}
      >
        <NavigationControl position="top-right" />

        {routeGeoJSON ? (
          <Source data={routeGeoJSON} id="route" type="geojson">
            <Layer
              id="route"
              layout={{
                'line-join': 'round',
                'line-cap': 'round',
              }}
              paint={{
                'line-color': '#1db7dd',
                'line-width': 5,
              }}
              source="route"
              type="line"
            />
          </Source>
        ) : undefined}
      </MapGL>
    </div>
  );
}

Package versions:

"mapbox-gl": "^3.7.0"
"react-map-gl": "^7.1.7"

[michaelcgorman]

I would suggest using a ref callback function instead of a ref created by useRef if you need to run code immediately after the map is initialized. Essentially:

import { Map, type MapRef } from 'react-map-gl';

const handleRef = (ref: MapRef | null) => {
  if (ref) {
    // ...
  }
};

const CustomMap = () => {
  return (
    <Map ref={handleRef}>
      // ...
    </Map>
  );
};