From e50bfdfbcb74282bdd703809e06277b07830452e Mon Sep 17 00:00:00 2001 From: Kyle Barron Date: Wed, 23 Sep 2026 16:03:55 -0400 Subject: [PATCH] fix(examples): reuse the luma.gl device when StrictMode remounts DeckGlOverlay In development, React StrictMode mounts DeckGlOverlay twice, so the interleaved MapboxOverlay creates two Decks on MapLibre's WebGL context back to back. Both attach a luma.gl device concurrently, and in the Zarr examples the second attach threw "WebGL context already attached to device", so nothing rendered. Pass deviceProps._reuseDevices so the second Deck reuses the device instead, as deck.gl already does for devices it creates itself. Co-Authored-By: Claude Opus 5.5 --- .../_shared/components/deckgl-overlay.tsx | 26 +++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/examples/_shared/components/deckgl-overlay.tsx b/examples/_shared/components/deckgl-overlay.tsx index 4026ce00..591383c0 100644 --- a/examples/_shared/components/deckgl-overlay.tsx +++ b/examples/_shared/components/deckgl-overlay.tsx @@ -8,7 +8,29 @@ import { useControl } from "react-map-gl/maplibre"; * Drop inside a `` element: ``. */ export function DeckGlOverlay(props: MapboxOverlayProps) { - const overlay = useControl(() => new MapboxOverlay(props)); - overlay.setProps(props); + const overlay = useControl( + () => new MapboxOverlay(withReusedDevice(props)), + ); + overlay.setProps(withReusedDevice(props)); return null; } + +/** + * Let a new `Deck` reuse a luma.gl device already attached to MapLibre's WebGL + * context instead of throwing. + * + * React `StrictMode` (development only) mounts this component twice, so the + * overlay creates a `Deck`, finalizes it, and immediately creates another on + * the same context. Both attach a device concurrently, and without + * `_reuseDevices` the second attach can throw "WebGL context already attached + * to device". deck.gl already passes this flag when it creates its own device + * ({@link https://github.com/visgl/deck.gl/blob/5eded84b438eef83387dc6579c51670389053602/modules/core/src/lib/deck.ts#L1469-L1473 | deck.ts#L1469-L1473}), + * but not when it attaches to an existing context, as in interleaved mode + * ({@link https://github.com/visgl/deck.gl/blob/5eded84b438eef83387dc6579c51670389053602/modules/core/src/lib/deck.ts#L434-L440 | deck.ts#L434-L440}). + */ +function withReusedDevice(props: MapboxOverlayProps): MapboxOverlayProps { + return { + ...props, + deviceProps: { _reuseDevices: true, ...props.deviceProps }, + }; +}