packages/example/src/routes/dev/async-rendering.tsx

@@ -1,5 +1,5 @@
 import { runtime } from "@/runtime"
-import { Text, TextField } from "@radix-ui/themes"
+import { Flex, Text, TextField } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Console, Effect } from "effect"
@@ -8,17 +8,21 @@ import * as React from "react"
 
 
 const RouteComponent = Component.make(function* AsyncRendering() {
+    const VMemoizedAsyncComponent = yield* Component.useFC(MemoizedAsyncComponent)
     const VAsyncComponent = yield* Component.useFC(AsyncComponent)
     const [input, setInput] = React.useState("")
 
-    return <>
+    return (
+        <Flex direction="column" align="stretch" gap="2">
             <TextField.Root
                 value={input}
                 onChange={e => setInput(e.target.value)}
             />
 
+            <VMemoizedAsyncComponent />
             <VAsyncComponent />
-    </>
+        </Flex>
+    )
 }).pipe(
     Component.withRuntime(runtime.context)
 )
@@ -27,16 +31,18 @@ const AsyncComponent = Component.make(function* AsyncComponent() {
     yield* Console.log("rendering")
 
     const VSubComponent = yield* Component.useFC(SubComponent)
-    React.useState()
     yield* Effect.sleep("500 millis")
 
-    return <>
+    return (
-        <Text>Rendered!</Text><br />
+        <Flex direction="column" align="stretch">
+            <Text>Rendered!</Text>
             <VSubComponent />
-    </>
+        </Flex>
+    )
 }).pipe(
     Component.suspense
 )
+const MemoizedAsyncComponent = Component.memo(AsyncComponent)
 
 const SubComponent = Component.make(function* SubComponent() {
     const [state] = React.useState(yield* Hook.useOnce(() => Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)))