fix: do not mutate data return by useSuspenseData when csr

.changeset/kind-singers-jump.md

@@ -0,0 +1,5 @@
+---
+'@ice/runtime': patch
+---
+
+fix: side effect of update suspense data may cause mulit time call

packages/runtime/src/Suspense.tsx

@@ -7,6 +7,12 @@ import type { RequestContext } from './types.js';
 const LOADER = '__ICE_SUSPENSE_LOADER__';
 const isClient = typeof window !== 'undefined' && 'onload' in window;
 
+declare global {
+  interface Window {
+    [LOADER]: Map<string, any>;
+  }
+}
+
 interface SuspenseState {
   id: string;
   data?: any;
@@ -20,16 +26,56 @@ type Request = (ctx: RequestContext) => Promise<any>;
 
 const SuspenseContext = React.createContext<SuspenseState | undefined>(undefined);
 
+const getHydrateData = (id: string) => {
+  let data = null;
+  const hasHydrateData = isClient && window[LOADER] && window[LOADER].has(id);
+  if (hasHydrateData) {
+    data = window[LOADER].get(id);
+  }
+  return {
+    hasHydrateData,
+    data,
+  };
+};
+
 export function useSuspenseData(request?: Request) {
   const appContext = useAppContext();
   const { requestContext } = appContext;
   const suspenseState = React.useContext(SuspenseContext);
 
   const { data, done, promise, update, error, id } = suspenseState;
+  const { hasHydrateData, data: hydrateData } = getHydrateData(id);
+
+  let thenable: Promise<any> = null;
+  if (!hasHydrateData && !error && !done && !promise && request) {
+    thenable = request(requestContext);
+    thenable.then((response) => {
+      update({
+        done: true,
+        data: response,
+        promise: null,
+      });
+    }).catch(e => {
+      update({
+        done: true,
+        error: e,
+        promise: null,
+      });
+    });
+  }
+
+  React.useEffect(() => {
+    // Update state in useEffect, otherwise it will cause bad setState warning.
+    if (thenable) {
+      update({
+        promise: thenable,
+      });
+    }
+  }, [thenable, update]);
 
   // 1. Use data from server side directly when hydrate.
-  if (isClient && (window[LOADER] as Map<string, any>) && window[LOADER].has(id)) {
-    return window[LOADER].get(id);
+  if (hasHydrateData) {
+    return hydrateData;
   }
 
   // 2. Check data request error, if error throw it to react.
@@ -56,27 +102,12 @@ export function useSuspenseData(request?: Request) {
     return null;
   }
 
-  // 6. Create a promise for the request and throw it to react.
-  const thenable = request(requestContext);
-
-  thenable.then((response) => {
+  if (!isClient) {
+    // 6. Create a promise for the request and throw it to react.
     update({
-      done: true,
-      data: response,
-      promise: null,
+      promise: thenable,
     });
-  }).catch(e => {
-    update({
-      done: true,
-      error: e,
-      promise: null,
-    });
-  });
-
-  update({
-    promise: thenable,
-  });
-
+  }
   throw thenable;
 }
 
@@ -100,8 +131,13 @@ export function withSuspense(Component) {
     });
 
     function update(value) {
-      // For SSR, setState is not working, so here we need to update the state manually.
-      const newState = Object.assign(suspenseState, value);
+      let newState: any;
+      if (isClient) {
+        newState = Object.assign({}, suspenseState, value);
+      } else {
+        // For SSR, setState is not working, so here we need to update the state manually.
+        newState = Object.assign(suspenseState, value);
+      }
       // For CSR.
       updateSuspenseData(newState);
     }