From 43d5a793dd0fa90ca74033a06f17db52e9239480 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Wed, 23 Jul 2025 01:52:11 +0200
Subject: [PATCH] Fix

---
 packages/effect-fc/README.md                  | 28 ++++++++++++-------
 .../src/routes/dev/async-rendering.tsx        |  2 +-
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/effect-fc/README.md b/packages/effect-fc/README.md
index 09f553e..260f32a 100644
--- a/packages/effect-fc/README.md
+++ b/packages/effect-fc/README.md
@@ -15,15 +15,12 @@ Documentation is currently being written. In the meantime, you can take a look a
 
 ## What writing components looks like
 ```typescript
-import { Container, Flex, Heading } from "@radix-ui/themes"
-import { Chunk, Console, Effect } from "effect"
-import { Component, Hook } from "effect-fc"
+import { Component, Hook, Memoized } from "effect-fc"
 import { Todo } from "./Todo"
 import { TodosState } from "./TodosState.service"
+import { runtime } from "@/runtime"
 
-//           Component.Component<never, TodosState | Scope, {}>
-//           VVV
-export const Todos = Component.make(function* Todos() {
+class Todos extends Component.make(function* Todos() {
     const state = yield* TodosState
     const [todos] = yield* Hook.useSubscribeRefs(state.ref)
 
@@ -32,20 +29,31 @@ export const Todos = Component.make(function* Todos() {
         Effect.addFinalizer(() => Console.log("Todos unmounted")),
     ))
 
-    const VTodo = yield* Component.useFC(Todo)
+    const TodoFC = yield* Component.useFC(Todo)
 
     return (
         <Container>
             <Heading align="center">Todos</Heading>
 
             <Flex direction="column" align="stretch" gap="2" mt="2">
-                <VTodo _tag="new" />
+                <TodoFC _tag="new" />
 
                 {Chunk.map(todos, (v, k) =>
-                    <VTodo key={v.id} _tag="edit" index={k} />
+                    <TodoFC key={v.id} _tag="edit" index={k} />
                 )}
             </Flex>
         </Container>
     )
-})
+}).pipe(
+    Memoized.memo
+) {}
+
+const TodosEntrypoint = Component.make(function* TodosEntrypoint() {
+    const context = yield* Hook.useContext(TodosState.Default, { finalizerExecutionMode: "fork" })
+    const TodosFC = yield* Effect.provide(Component.useFC(Todos), context)
+
+    return <TodosFC />
+}).pipe(
+    Component.withRuntime(runtime.context)
+)
 ```
diff --git a/packages/example/src/routes/dev/async-rendering.tsx b/packages/example/src/routes/dev/async-rendering.tsx
index be03b9f..ecc52e6 100644
--- a/packages/example/src/routes/dev/async-rendering.tsx
+++ b/packages/example/src/routes/dev/async-rendering.tsx
@@ -20,7 +20,7 @@ const RouteComponent = Component.make(function* AsyncRendering() {
                 onChange={e => setInput(e.target.value)}
             />
 
-            <VMemoizedAsyncComponent fallback={<p>Loading memoized...</p>} />
+            <VMemoizedAsyncComponent fallback={React.useMemo(() => <p>Loading memoized...</p>, [])} />
             <VAsyncComponent />
         </Flex>
     )