From 09cb9a46078ea6ed55a83a8d5f73d2dd76a4c72d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Thu, 17 Jul 2025 17:07:26 +0200
Subject: [PATCH] Async tests

---
 .../src/routes/dev/async-rendering.tsx        | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/example/src/routes/dev/async-rendering.tsx b/packages/example/src/routes/dev/async-rendering.tsx
index 0b2e479..7e92581 100644
--- a/packages/example/src/routes/dev/async-rendering.tsx
+++ b/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 <>
-        <TextField.Root
-            value={input}
-            onChange={e => setInput(e.target.value)}
-        />
+    return (
+        <Flex direction="column" align="stretch" gap="2">
+            <TextField.Root
+                value={input}
+                onChange={e => setInput(e.target.value)}
+            />
 
-        <VAsyncComponent />
-    </>
+            <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 <>
-        <Text>Rendered!</Text><br />
-        <VSubComponent />
-    </>
+    return (
+        <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)))