fix: prevent unnecessary re-mount (#670)

src/Globe/Globe.stories.tsx

@@ -1,11 +1,11 @@
 import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj } from "@storybook/react";
 import { CesiumTerrainProvider, EllipsoidTerrainProvider, IonResource } from "cesium";
+import { StrictMode } from "react";
 
 import Viewer from "../Viewer";
 
 import Globe from "./Globe";
-import { StrictMode } from "react";
 
 type Story = StoryObj<typeof Globe>;
 
@@ -28,16 +28,20 @@ export const Basic: Story = {
 };
 
 export const Promise: Story = {
-  args: { enableLighting: true },
-  render: args => (
+  args: { enableLighting: true, isTerrainEnabled: false } as any,
+  render: ({ isTerrainEnabled, ...args }: any) => (
     <StrictMode>
       <Viewer full>
         <Globe
           {...args}
-          terrainProvider={CesiumTerrainProvider.fromUrl(IonResource.fromAssetId(1), {
-            requestVertexNormals: true,
-            requestWaterMask: false,
-          })}
+          terrainProvider={
+            isTerrainEnabled
+              ? CesiumTerrainProvider.fromUrl(IonResource.fromAssetId(1), {
+                  requestVertexNormals: true,
+                  requestWaterMask: false,
+                })
+              : new EllipsoidTerrainProvider()
+          }
           onImageryLayersUpdate={action("onImageryLayersUpdate")}
           onTerrainProviderChange={action("onTerrainProviderChange")}
         />

src/core/hooks.ts

@@ -78,6 +78,7 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
   const initialProps = useRef<Props>(propsWithChildren(props));
   const prevProps = useRef<Props>({} as Props);
   const [mounted, setMounted] = useState(false);
+  const mountedRef = useRef(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const stateRef = useRef<State>();
   const eventManager = ctx?.[eventManagerContextKey];
@@ -145,7 +146,7 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
       initialProps.current = props;
 
       // Recreate cesium element when any read-only prop is updated
-      if (updatedReadonlyProps.length > 0) {
+      if (mountedRef.current && updatedReadonlyProps.length > 0) {
         if (process.env.NODE_ENV !== "production") {
           console.warn(
             `Warning: <${name}> is recreated because following read-only props have been updated: ${updatedReadonlyProps.join(
@@ -254,6 +255,7 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
     provided.current = undefined;
     stateRef.current = undefined;
     element.current = undefined;
+    mountedRef.current = false;
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // To prevent re-execution by hot loader, execute only once
@@ -290,6 +292,7 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
         // first time
         prevProps.current = propsWC;
         initialProps.current = propsWC;
+        mountedRef.current = true;
       }
     };
     update();