Fix

packages/effect-fc/src/Async.ts

@@ -12,8 +12,6 @@ export interface AsyncPrototype {
     readonly [AsyncTypeId]: AsyncTypeId
 }
 
-const PromiseTypeId: unique symbol = Symbol.for("@effect-fc/Async/Promise")
-
 export const AsyncPrototype: AsyncPrototype = Object.freeze({
     [AsyncTypeId]: AsyncTypeId,
 
@@ -21,7 +19,7 @@ export const AsyncPrototype: AsyncPrototype = Object.freeze({
         this: Component.Component<P, A, E, R> & Async,
         runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
     ) {
-        const Inner = (props: { readonly [PromiseTypeId]: Promise<React.ReactNode> }) => React.use(props[PromiseTypeId])
+        const Inner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
         Inner.displayName = `${ this.displayName }Inner`
 
         return (props: P) => {
@@ -32,7 +30,7 @@ export const AsyncPrototype: AsyncPrototype = Object.freeze({
                 )
             )
 
-            return React.createElement(Inner, { ...props, [PromiseTypeId]: promise })
+            return React.createElement(Inner, { promise })
         }
     },
 } as const)

packages/example/src/routes/async.tsx

@@ -26,10 +26,12 @@ class AsyncFetchPostView extends Component.make("AsyncFetchPostView")(function*(
         Effect.andThen(Schema.decodeUnknown(Post)),
     ), [props.id])
 
-    return <div>
+    return (
+        <div>
             <Heading>{post.title}</Heading>
             <Text>{post.body}</Text>
         </div>
+    )
 }).pipe(
     Async.async,
     Memoized.memoized,
@@ -48,7 +50,9 @@ const AsyncRouteComponent = Component.make("AsyncRouteView")(function*() {
                     onValueChange={flow(Array.head, Option.getOrThrow, setId)}
                 />
 
+                <React.Suspense fallback={<Text>Loading...</Text>}>
                     <AsyncFetchPost id={id} />
+                </React.Suspense>
             </Flex>
         </Container>
     )