fix(plugin-basic-ui): hydration mismatch warning (#436)

Author: tonyfromundefined

.changeset/quiet-poems-attack.md

@@ -0,0 +1,5 @@
+---
+"@stackflow/plugin-basic-ui": patch
+---
+
+fix hydration mismatch warning in server-side rendering

extensions/plugin-basic-ui/src/components/AppScreen.tsx

@@ -7,6 +7,7 @@ import type { GlobalVars } from "../basicUIPlugin.css";
 import { globalVars } from "../basicUIPlugin.css";
 import {
   useLazy,
+  useMounted,
   useNullableActivity,
   useStyleEffectHide,
   useStyleEffectOffset,
@@ -49,6 +50,7 @@ const AppScreen: React.FC<AppScreenProps> = ({
 }) => {
   const globalOptions = useGlobalOptions();
   const activity = useNullableActivity();
+  const mounted = useMounted();
 
   const { pop } = useActions();
 
@@ -182,8 +184,10 @@ const AppScreen: React.FC<AppScreenProps> = ({
           }),
         )}
         data-stackflow-component-name="AppScreen"
-        data-stackflow-activity-id={activity?.id}
-        data-stackflow-activity-is-active={activity?.isActive}
+        data-stackflow-activity-id={mounted ? activity?.id : undefined}
+        data-stackflow-activity-is-active={
+          mounted ? activity?.isActive : undefined
+        }
       >
         {activityEnterStyle !== "slideInLeft" && (
           <div className={css.dim} ref={dimRef} />

extensions/plugin-basic-ui/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from "./useLazy";
 export * from "./useMaxWidth";
+export * from "./useMounted";
 export * from "./useNullableActivity";
 export * from "./useStyleEffect";
 export * from "./useStyleEffectHide";

extensions/plugin-basic-ui/src/hooks/useMounted.ts

@@ -0,0 +1,11 @@
+import { useEffect, useReducer, useState } from "react";
+
+export function useMounted() {
+  const [mounted, mount] = useReducer(() => true, false);
+
+  useEffect(() => {
+    mount();
+  }, []);
+
+  return mounted;
+}