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

@@ -26,9 +26,37 @@ export function useSuspenseData(request?: Request) {
   const suspenseState = React.useContext(SuspenseContext);
 
   const { data, done, promise, update, error, id } = suspenseState;
+  const hasHydrateData = isClient && (window[LOADER] as Map<string, any>) && window[LOADER].has(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)) {
+  if (hasHydrateData) {
     return window[LOADER].get(id);
   }
 
@@ -56,27 +84,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) => {
-    update({
-      done: true,
-      data: response,
-      promise: null,
-    });
-  }).catch(e => {
+  if (!isClient) {
+    // 6. Create a promise for the request and throw it to react.
     update({
-      done: true,
-      error: e,
-      promise: null,
+      promise: thenable,
     });
-  });
-
-  update({
-    promise: thenable,
-  });
-
+  }
   throw thenable;
 }
 
@@ -100,8 +113,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);
     }