Solved it, used useState instead of useRef, and it solved it.

const [map, setMap] = useState(null);

useEffect(() => {
    if (dss_rowData && map) {
      map?.setCenter({
        lat: Number(laty),
        lng: Number(longx),
      });
    }
  }, [rowData, map]);

ref={(ref) => setMap(ref)}
Answer from emekaokoli on Stack Exchange
🌐
React Map GL
visgl.github.io › default (map)
default (Map) | react-map-gl
import * as React from 'react'; import {useRef, useCallback} from 'react'; import Map from 'react-map-gl/mapbox'; import type {MapRef} from 'react-map-gl/mapbox'; function App() { const mapRef = useRef<MapRef>(null); const onMapLoad = useCallback(() => { mapRef.current.on('move', () => { // ...
🌐
React Map GL
visgl.github.io › tips and tricks
Tips and Tricks | react-map-gl
There are some situations where you want to know if a point is currently visible on the map. Checking this is simple and can be done like so: const mapRef = useRef<MapRef>(); const checkIfPositionInViewport = (lat, lng) => { const bounds = mapRef.current.getBounds(); return bounds.contains([lng, ...
Discussions

mapbox gl js - how to make Map ref object available on first modal window render/launch - Geographic Information Systems Stack Exchange
I have a table where when I click on a row of the table, I get the content/objects of the row which I am passing to the Dialog component that uses react-map-gl to display the item's location based ... More on gis.stackexchange.com
🌐 gis.stackexchange.com
September 9, 2022
uber/react-map-gl getMap & exposed Mapbox API - Stack Overflow
I'm using the following code snippet to try to access the MapBox API from uber react-map-gl: 4.0.2 using mapbox-gl v0.50.0. import MapGL from 'react-map-gl'; export default class App extends More on stackoverflow.com
🌐 stackoverflow.com
reactjs - How to force react-map-gl Map to rerender on props change - Stack Overflow
I am using the react-map-gl Map component in my project. I pass in via props props.displayUploadedFiles, an array of GeoJSON objects. I want to display these GeoJSON objects on my Map using react-m... More on stackoverflow.com
🌐 stackoverflow.com
reactjs - Make Map ref object available on first modal window render/launch - Stack Overflow
I have a table where when I click on a row of the table, I get the content/objects of the row which I am passing to the Dialog component that uses react-map-gl to display the item's location based ... More on stackoverflow.com
🌐 stackoverflow.com
🌐
GitHub
github.com › visgl › react-map-gl › issues › 904
Use .getMap() outside of Map Component · Issue #904 · visgl/react-map-gl
October 3, 2019 - Hi, Working on a project that is getting quite large and I was wondering if there is a simple solution to using the map outside of the component. At the moment I am using a ref in order to use getMap() within the map component, but I hav...
Author   l3git9
🌐
Stack Overflow
stackoverflow.com › questions › 53442394 › uber-react-map-gl-getmap-exposed-mapbox-api
uber/react-map-gl getMap & exposed Mapbox API - Stack Overflow
import MapGL from 'react-map-gl'; export default class App extends Component { constructor(props) { super(props); this.mapRef= React.createRef(); } componentDidMount() { let data = this.mapRef.getMap().getBounds(); <---- } render() { <MapGL {...viewport} width="100%" height="100%" mapStyle={MapStyle} onViewportChange={this._updateViewport} ref={map => this.mapRef = map} mapboxApiAccessToken={TOKEN} > } } if I try to access any other methods like getStyle/getSource and others raise an error "is not a function" & "Cannot read property 'version' of undefined".
🌐
GitHub
github.com › visgl › react-map-gl
GitHub - visgl/react-map-gl: React friendly API wrapper around MapboxGL JS · GitHub
react-map-gl is a suite of React components designed to provide a React API for mapbox-gl or maplibre-gl.
Starred by 8.4K users
Forked by 1.4K users
Languages   TypeScript 65.5% | JavaScript 32.2%
🌐
npm
npmjs.com › package › react-map-gl
react-map-gl - npm
4 weeks ago - React components for MapLibre GL JS and Mapbox GL JS. Latest version: 8.1.1, last published: 23 days ago. Start using react-map-gl in your project by running `npm i react-map-gl`. There are 484 other projects in the npm registry using react-map-gl.
      » npm install react-map-gl
    
Published   Apr 11, 2026
Version   8.1.1
Top answer
1 of 2
1

I never did figure out why the re-render wasn't being triggered properly by the useEffect() call as we would expect it to. However, I figured out a workaround for those interested.

in the MapboxMap component, I added this:

  const mapRef = useRef(null);
  useEffect(() => {
    if (mapRef?.current) {
      mapRef.current.zoomTo(mapRef.current.getZoom());
    }
  }, [props.displayUploadedFiles]);

It goes into the underlying mapbox-gl map object and, whenever more files are updated, it "zooms in" to the current zoom level. This has the effect of if I were to pan the map manually, but automates it. It forces the map to re-render and makes it so the user can't perceive the viewport change.

2 of 2
0

you can use the useEffect to watch for changes in the prop and trigger the update of the map layers. You can also use the useMemo hook to memoize the geoJsons array, for performance.

import React, { useState, useEffect, useMemo } from 'react';
import { Map, Source, Layer } from 'react-map-gl';

function MapboxMap(props) {
  const geoJsons = useMemo(() => (
    props.displayUploadedFiles.map((file) => {
      const id = JSON.stringify(file.features);
      return (
        <Source key={id} type="geojson" data={file}>
          <Layer key={id} {...pointLayer} />
        </Source>
      );
    })
  ), [props.displayUploadedFiles]);

  // Use useEffect to trigger the map update when props change
  useEffect(() => {
    // Force a map update when the displayUploadedFiles prop changes
    // This will re-render the map layers immediately
    // You may also need to handle map updates here if required
  }, [props.displayUploadedFiles]);

  return (
    <Map mapboxAccessToken={mapboxToken} ...>
      {geoJsons}
      {/* ... */}
    </Map>
  );
}

export default MyMap;

this should now update immediately when the displayUploadedFiles prop changes, without the need to pan the map.

Find elsewhere
🌐
LogRocket
blog.logrocket.com › home › using mapbox gl js with react
Using Mapbox GL JS with React - LogRocket Blog
June 4, 2024 - You will also notice that we created and used a ref that integrates the two components, and is passed to both as a mapRef prop. The last piece in our searchable map is the deck.gl layer we created data for. This will render on the map when we search for an area. It is passed the viewport details as well as the searchResultLayer, which it uses to generate the dot over our location as shown below. And that’s it, we have a searchable map! So far, we’ve created two React components for our map examples (MyMap and SearchableMap).
🌐
React Map GL
visgl.github.io › marker
Marker | react-map-gl
import * as React from 'react'; import {useRef, useMemo, useCallback} from 'react'; import Map, {Marker} from 'react-map-gl/mapbox'; import mapboxgl from 'mapbox-gl'; function App() { const markerRef = useRef<mapboxgl.Marker>(); const popup = useMemo(() => { return mapboxgl.Popup().setText('Hello world!'); }, []) const togglePopup = useCallback(() => { markerRef.current?.togglePopup(); }, []); return <> <Map> <Marker longitude={-122.4} latitude={37.8} color="red" popup={popup} ref={markerRef} /> </Map> <button onClick={togglePopup}>Toggle popup</button> </>; }
🌐
React Map GL
visgl.github.io › introduction
Introduction | react-map-gl
Each library offer unique features that may not exist in another. ... react-map-gl was first created by Uber's Visualization team, where Mapbox was used as a component to build powerful web tools such as geospatial analytics and self-driving data visualization.
🌐
mapbox-gl-threelayer
salgum1114.github.io › mapbox-gl-threelayer › examples › react-map-gl
react-map-gl
import { ThreeLayer } from 'mapbox-gl-threelayer'; const ReactMapGL = () => { const mapRef = useRef<mapboxgl.Map>(); const [viewport, setViewport] = useState<any>({ width: '100%', height: '100%', longitude: 127.04674407739593, latitude: 37.30012673302676, zoom: 16, pitch: 60, }); const handleLoad = (event: MapLoadEvent) => { const { target } = event; mapRef.current = target; addThreeLayer(mapRef.current); }; const addThreeLayer = (map: mapboxgl.Map) => { const threeLayer = new ThreeLayer(); map.addLayer(threeLayer); threeLayer.threebox ·
🌐
DEV Community
dev.to › ivanbtrujillo › fit-viewport-to-markers-using-react-map-gl-3ig1
Fit viewport to markers using react-map-gl - DEV Community
December 20, 2020 - import React from "react"; import ReactMapGL, { Marker, NavigationControl } from "react-map-gl"; import "mapbox-gl/dist/mapbox-gl.css"; import "./map.css"; const MAP_STYLE = { width: "100%", height: "100%" }; const MAP_CONFIG = { maxZoom: 20, mapStyle: "mapbox://styles/mapbox/dark-v10", mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_KEY }; export const Map: React.FC<unknown> = () => { const mapRef = React.useRef(); const mapContainerRef = React.useRef(null); const viewport = { width: 400, height: 400 }; return ( <div ref={mapContainerRef} className="map"> <ReactMapGL ref={mapRef} {...MAP_CONFIG} {...viewport}> <NavigationControl className="navigation-control" showCompass={false} /> </ReactMapGL> </div> ); }; Styles: .map { width: 100%; height: 100%; } .navigation-control { position: absolute; right: 0; margin-right: 10px; margin-top: 10px; } We will use Marker later.
🌐
React Map GL
visgl.github.io › usecontrol
useControl | react-map-gl
useControl<T extends IControl>( onCreate: ({map: MapRef, mapLib: maplibregl}) => IControl, options?: { position?: ControlPosition; } ): T useControl<T extends IControl>( onCreate: ({map: MapRef, mapLib: maplibregl}) => IControl, onRemove: ({map: MapRef, mapLib: maplibregl}) => void, options?: { position?: ControlPosition; } ): T useControl<T extends IControl>( onCreate: ({map: MapRef, mapLib: maplibregl}) => IControl, onAdd: ({map: MapRef, mapLib: maplibregl}) => void, onRemove: ({map: MapRef, mapLib: maplibregl}) => void, options?: { position?: ControlPosition; } ): T
🌐
GitHub
github.com › neeleshbisht99 › react-map-gl-directions › blob › master › README.md
react-map-gl-directions/README.md at master · neeleshbisht99/react-map-gl-directions
mapRef · Object · Ref for react-map-gl map component. mapboxApiAccessToken · String · https://www.mapbox.com/ position · String · "top-right" Position on the map to which the directions plugin control will be added.
Author   neeleshbisht99
🌐
Sparkgeo
sparkgeo.com › home › build a react mapboxgl component with hooks
Build a React MapboxGL Component with Hooks | Sparkgeo
August 28, 2025 - Finally, the last hook we use in this example, useRef, is a reference to something in the component which will always exist for the entire life of the component. In our case, we initialize our mapContainer to null, then on the first render we associate it with the mapContainer ref.
🌐
React Map GL
visgl.github.io › react-map-gl
Home | react-map-gl
Use a MapLibre GL JS or Mapbox GL JS map as a fully controlled reactive component.