Suspending the MapViewContent component will crash the map with React 18

[eatyourgreens]

irv-frontend/src/map/MapView.tsx

Lines 26 to 44 in e32a9ba

	const [viewState, setViewState] = useRecoilState(mapViewStateState);
	useSyncMapUrl();
	const background = useRecoilValue(backgroundState);
	const showLabels = useRecoilValue(showLabelsState);
	const { mapStyle, firstLabelId } = useBasemapStyle(background, showLabels);
	const viewLayers = useRecoilValue(viewLayersState);
	const viewLayersParams = useRecoilValue(viewLayersParamsState);
	const interactionGroups = useRecoilValue(interactionGroupsState);
	const fitBounds = useRecoilValue(mapFitBoundsState);
	const resetFitBounds = useResetRecoilState(mapFitBoundsState);
	useEffect(() => {
	// reset map fit bounds whenever MapView is mounted
	resetFitBounds();
	}, [resetFitBounds]);

Heads up that the Recoil state here works fine with React 17, but crashes with the new createRoot(node).render() in React 18. Moving the Recoil state down into individual components fixes it. I think that the React Map GL Map component crashes if it renders while suspended, but only with the new concurrent rendering API.

See also:

• Concurrent rendering in React 18 crashes the map. irv-jamaica#41
• [Bug] Invalid type: 'container' must be a String or HTMLElement. visgl/react-map-gl#1960 (comment)