From adf9c1a9926af3c2437d11a7eeb50c2b6cec1863 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Sat, 23 Aug 2025 01:14:59 +0200
Subject: [PATCH] README fix

---
 README.md                    |  2 +-
 packages/effect-fc/README.md | 35 ++++++++++++++++++++---------------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 90ce5b3..617c408 100644
--- a/README.md
+++ b/README.md
@@ -4,4 +4,4 @@
 
 This monorepo contains:
 - [The `effect-fc` library](packages/effect-fc)
-- [An example project](packges/example)
+- [An example project](packages/example)
diff --git a/packages/effect-fc/README.md b/packages/effect-fc/README.md
index 260f32a..1ecb7aa 100644
--- a/packages/effect-fc/README.md
+++ b/packages/effect-fc/README.md
@@ -11,25 +11,26 @@ Documentation is currently being written. In the meantime, you can take a look a
 - `react` & `@types/react` 19+
 
 ## Known issues
-- React Refresh replacement doesn't work for Effect FC's yet. Page reload is required to view changes. Regular React components are unaffected.
+- React Refresh doesn't work for Effect FC's yet. Page reload is required to view changes. Regular React components are unaffected.
 
 ## What writing components looks like
 ```typescript
-import { Component, Hook, Memoized } from "effect-fc"
+import { Component } from "effect-fc"
+import { useOnce, useSubscribe } from "effect-fc/hooks"
 import { Todo } from "./Todo"
 import { TodosState } from "./TodosState.service"
-import { runtime } from "@/runtime"
 
-class Todos extends Component.make(function* Todos() {
+
+export class Todos extends Component.makeUntraced(function* Todos() {
     const state = yield* TodosState
-    const [todos] = yield* Hook.useSubscribeRefs(state.ref)
+    const [todos] = yield* useSubscribe(state.ref)
 
-    yield* Hook.useOnce(() => Effect.andThen(
+    yield* useOnce(() => Effect.andThen(
         Console.log("Todos mounted"),
         Effect.addFinalizer(() => Console.log("Todos unmounted")),
     ))
 
-    const TodoFC = yield* Component.useFC(Todo)
+    const TodoFC = yield* Todo
 
     return (
         <Container>
@@ -38,22 +39,26 @@ class Todos extends Component.make(function* Todos() {
             <Flex direction="column" align="stretch" gap="2" mt="2">
                 <TodoFC _tag="new" />
 
-                {Chunk.map(todos, (v, k) =>
-                    <TodoFC key={v.id} _tag="edit" index={k} />
+                {Chunk.map(todos, todo =>
+                    <TodoFC key={todo.id} _tag="edit" id={todo.id} />
                 )}
             </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)
+const TodosStateLive = TodosState.Default("todos")
+
+const Index = Component.makeUntraced(function* Index() {
+    const context = yield* useContext(TodosStateLive, { finalizerExecutionMode: "fork" })
+    const TodosFC = yield* Effect.provide(Todos, context)
 
     return <TodosFC />
 }).pipe(
     Component.withRuntime(runtime.context)
 )
+
+export const Route = createFileRoute("/")({
+    component: Index
+})
 ```