From 3827bf5ea43e8c09bb5da078a792835f56626789 Mon Sep 17 00:00:00 2001
From: malangcat <asher@daangn.com>
Date: Tue, 28 Jan 2025 03:07:12 +0900
Subject: [PATCH] fix: temporally suppress activity.id hydration mismatch

---
 packages/stackflow/src/primitive/AppScreen/useAppScreen.tsx | 3 ++-
 packages/stackflow/src/primitive/private/useTopActivity.ts  | 6 +-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/stackflow/src/primitive/AppScreen/useAppScreen.tsx b/packages/stackflow/src/primitive/AppScreen/useAppScreen.tsx
index f5ddde20f..268a2a2da 100644
--- a/packages/stackflow/src/primitive/AppScreen/useAppScreen.tsx
+++ b/packages/stackflow/src/primitive/AppScreen/useAppScreen.tsx
@@ -37,13 +37,14 @@ export function useAppScreen(props: UseAppScreenProps) {
       activity,
       stateProps,
       activityProps: elementProps({
-        id: activity?.id,
         "data-part": "activity",
         "data-activity-type": "full-screen",
         ...activityProps,
         ...stateProps,
         "data-activity-id": activity?.id,
         style: zIndexStyle,
+        // FIXME: @stackflow/react should prevent activity.id hydration mismatch; this is temporal fix.
+        suppressHydrationWarning: true,
       }),
       dimProps: elementProps({
         "data-part": "dim",
diff --git a/packages/stackflow/src/primitive/private/useTopActivity.ts b/packages/stackflow/src/primitive/private/useTopActivity.ts
index 4370ae7b1..f54311ba6 100644
--- a/packages/stackflow/src/primitive/private/useTopActivity.ts
+++ b/packages/stackflow/src/primitive/private/useTopActivity.ts
@@ -20,11 +20,7 @@ export function useTopActivity() {
   useEffect(() => {
     if (!topId) return;
 
-    const el = document.getElementById(topId);
-    if (!el) {
-      throw new Error(`Cannot find the top activity element with id: ${topId}`);
-    }
-
+    const el = document.querySelector<HTMLElement>(`[data-activity-id="${topId}"]`);
     setTopEl(el);
   }, [topId]);