[Bug] mapRef.current is null inside `onLoad`

[jgarplind]

Description

Using a simple implementation inspired by @Pessimistress in https://github.com/visgl/react-map-gl/discussions/1983#discussioncomment-3615365, I find that the mapRef is null at the time onLoad is called.

Doing something like this:

      onLoad={({ target }) => {
        const map = target as MapboxMap;
        console.log("current event", map);
        console.log("current", mapRef.current);
        setTimeout(() => console.log("current later", mapRef.current), 10);
      }}

• current event logs the map object
• current logs null
• current later logs the non-null map reference

Expected Behavior

mapRef.current should be non-null by the time onLoad is called.

Steps to Reproduce

See above.

Environment

• Framework version: 7.1.7
• Map library: mapbox-gl@3.5.1
• Browser: Edge 126
• OS: Windows 11

Logs

No response

[Pessimistress]

Can you create a CodeSandbox that reproduces your issue?

[jgarplind]

Can you create a CodeSandbox that reproduces your issue?

It didn't reproduce, and I could in fact not even reproduce it in our own repository now that I tried again.

I will close this as "can't repro", and re-open only if I can reproduce it consistently in a place where you too can observe it.

Thanks for taking the time to respond!

[lsthornt]

I am also seeing this behavior in our project. If I can find some time, I will look into creating a CodeSandbox. For now, the steps are:

• <Map reuseMaps={true} />
• render map => (onLoad fires and mapRef.current is defined)
• navigate away, unmounting the map
• return to page, re-rendering map => (onLoad fires, mapRef.current === null)

The behavior is quite reproducible for us, and goes away when disabling reuseMaps

[lsthornt]

First time digging to this codebase here, but it looks like the ref's value (contextValue.map) set set after the call to Mapbox.reuse, where the "load" event is fired: https://github.com/visgl/react-map-gl/blob/master/src/components/map.tsx#L86