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
-// 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 (
Todos
-
+
{Chunk.map(todos, (v, k) =>
-
+
)}
)
-})
+}).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
+}).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)}
/>
- Loading memoized...
} />
+ Loading memoized...
, [])} />
)