refactor(frontend): concurrent rendering in React 18

- use the new `createRoot` API in React 18. - refactor the base map layer to avoid an error in React Map GL when the map first mounts.
nismod · Jun 25, 2024 · 1268811 · 1268811
1 parent 2850a4f
commit 1268811
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 41 deletions.
diff --git a/frontend/src/details/adaptations/FeatureAdaptationsTable.tsx b/frontend/src/details/adaptations/FeatureAdaptationsTable.tsx
@@ -8,7 +8,7 @@ import { getAssetDataFormats } from 'config/assets/data-formats';
 import { FeatureSidebarContent } from 'details/features/FeatureSidebarContent';
 import { BoundingBox, extendBbox } from 'lib/bounding-box';
 import { colorMap } from 'lib/color-map';
-import { mapFitBoundsState } from 'map/MapView';
+import { mapFitBoundsState } from 'lib/map/MapBoundsFitter';
 import { ColorBox } from 'map/tooltip/content/ColorBox';
 import { useCallback, useMemo } from 'react';
 import { atom, useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';

diff --git a/frontend/src/lib/data-map/BaseMap.tsx b/frontend/src/lib/data-map/BaseMap.tsx
@@ -1,25 +1,36 @@
 import { MapViewState } from 'deck.gl/typed';
-import { ComponentProps, FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import { Map } from 'react-map-gl/maplibre';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import { backgroundState, showLabelsState } from 'map/layers/layers-state';
+import { useBasemapStyle } from 'map/use-basemap-style';
+import { mapViewStateState } from 'state/map-view/map-view-state';
 
 export interface BaseMapProps {
-  mapStyle: ComponentProps<typeof Map>['mapStyle'];
-  viewState: MapViewState;
-  onViewState: (vs: MapViewState) => void;
   children?: ReactNode;
 }
 
 /**
  * Displays a react-map-gl basemap component.
  * Accepts children such as a DeckGLOverlay, HUD controls etc
  */
-export const BaseMap: FC<BaseMapProps> = ({ mapStyle, viewState, onViewState, children }) => {
+export const BaseMap: FC<BaseMapProps> = ({ children }) => {
+  const background = useRecoilValue(backgroundState);
+  const showLabels = useRecoilValue(showLabelsState);
+  const [viewState, setViewState] = useRecoilState(mapViewStateState);
+  const { mapStyle } = useBasemapStyle(background, showLabels);
+
+  function handleViewStateChange({ viewState }: { viewState: MapViewState }) {
+    setViewState(viewState);
+  }
+
   return (
     <Map
       reuseMaps={true}
       styleDiffing={true}
       {...viewState}
-      onMove={({ viewState }) => onViewState(viewState)}
+      onMove={handleViewStateChange}
       mapStyle={mapStyle}
       dragRotate={false}
       keyboard={false}

diff --git a/frontend/src/lib/map/MapBoundsFitter.tsx b/frontend/src/lib/map/MapBoundsFitter.tsx
@@ -1,15 +1,24 @@
 import { WebMercatorViewport } from 'deck.gl/typed';
 import { FC, useEffect } from 'react';
 import { useMap } from 'react-map-gl/maplibre';
+import { atom, useRecoilValue, useResetRecoilState } from 'recoil';
 
 import { BoundingBox, appToDeckBoundingBox } from '../bounding-box';
 
-interface MapBoundsFitterProps {
-  boundingBox: BoundingBox;
-}
+export const mapFitBoundsState = atom<BoundingBox>({
+  key: 'mapFitBoundsState',
+  default: null,
+});
 
-export const MapBoundsFitter: FC<MapBoundsFitterProps> = ({ boundingBox }) => {
+export const MapBoundsFitter: FC = () => {
   const { current: map } = useMap();
+  const boundingBox = useRecoilValue(mapFitBoundsState);
+
+  const resetFitBounds = useResetRecoilState(mapFitBoundsState);
+  useEffect(() => {
+    // reset map fit bounds whenever map is mounted
+    resetFitBounds();
+  }, [resetFitBounds]);
 
   useEffect(() => {
     if (boundingBox != null && map != null) {

diff --git a/frontend/src/map/MapView.tsx b/frontend/src/map/MapView.tsx
@@ -1,18 +1,10 @@
 import { Suspense, useCallback, useEffect } from 'react';
-import {
-  atom,
-  useRecoilState,
-  useRecoilValue,
-  useResetRecoilState,
-  useSetRecoilState,
-} from 'recoil';
-
-import { mapViewStateState } from '../state/map-view/map-view-state';
-import { BoundingBox } from 'lib/bounding-box';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+
 import { BaseMap } from 'lib/data-map/BaseMap';
 import { DataMap } from 'lib/data-map/DataMap';
 import { DataMapTooltip } from 'lib/data-map/DataMapTooltip';
-import { MapBoundsFitter } from 'lib/map/MapBoundsFitter';
+import { MapBoundsFitter, mapFitBoundsState } from 'lib/map/MapBoundsFitter';
 import { MapHud } from 'lib/map/hud/MapHud';
 import { MapHudRegion } from 'lib/map/hud/MapHudRegion';
 import {
@@ -37,11 +29,6 @@ import { MapLegend } from './legend/MapLegend';
 import { TooltipContent } from './tooltip/TooltipContent';
 import { useBasemapStyle } from './use-basemap-style';
 
-export const mapFitBoundsState = atom<BoundingBox>({
-  key: 'mapFitBoundsState',
-  default: null,
-});
-
 const AppPlaceSearch = () => {
   const setFitBounds = useSetRecoilState(mapFitBoundsState);
 
@@ -114,12 +101,11 @@ const MapHudMobileLayout = () => {
 };
 
 const MapViewContent = () => {
-  const [viewState, setViewState] = useRecoilState(mapViewStateState);
   const background = useRecoilValue(backgroundState);
   const showLabels = useRecoilValue(showLabelsState);
   const viewLayers = useRecoilValue(viewLayersFlatState);
   const saveViewLayers = useSaveViewLayers();
-  const { mapStyle, firstLabelId } = useBasemapStyle(background, showLabels);
+  const { firstLabelId } = useBasemapStyle(background, showLabels);
 
   useEffect(() => {
     saveViewLayers(viewLayers);
@@ -129,37 +115,31 @@ const MapViewContent = () => {
 
   const interactionGroups = useRecoilValue(interactionGroupsState);
 
-  const fitBounds = useRecoilValue(mapFitBoundsState);
-
-  const resetFitBounds = useResetRecoilState(mapFitBoundsState);
-  useEffect(() => {
-    // reset map fit bounds whenever MapView is mounted
-    resetFitBounds();
-  }, [resetFitBounds]);
-
   const isMobile = useIsMobile();
 
   return (
-    <BaseMap mapStyle={mapStyle} viewState={viewState} onViewState={setViewState}>
+    <>
       <DataMap
         beforeId={firstLabelId}
         viewLayers={viewLayers}
         viewLayersParams={viewLayersParams}
         interactionGroups={interactionGroups}
       />
-      <MapBoundsFitter boundingBox={fitBounds} />
+      <MapBoundsFitter />
       <DataMapTooltip>
         <TooltipContent />
       </DataMapTooltip>
       {isMobile ? <MapHudMobileLayout /> : <MapHudDesktopLayout />}
-    </BaseMap>
+    </>
   );
 };
 
 export const MapView = () => (
   <ErrorBoundary message="There was a problem displaying the map." justifyErrorContent="center">
     <Suspense fallback={null}>
-      <MapViewContent />
+      <BaseMap>
+        <MapViewContent />
+      </BaseMap>
     </Suspense>
   </ErrorBoundary>
 );