Fix

packages/example/src/main.tsx

@@ -16,8 +16,8 @@ declare module "@tanstack/react-router" {
 
 createRoot(document.getElementById("root")!).render(
     <StrictMode>
-        <ReactManagedRuntime.AsyncProvider runtime={runtime}>
+        <ReactManagedRuntime.Provider runtime={runtime}>
             <RouterProvider router={router} />
-        </ReactManagedRuntime.AsyncProvider>
+        </ReactManagedRuntime.Provider>
     </StrictMode>
 )

packages/example/src/routes/index.tsx

@@ -3,18 +3,18 @@ import { Todos } from "@/todo/Todos"
 import { TodosState } from "@/todo/TodosState.service"
 import { createFileRoute } from "@tanstack/react-router"
 import { Effect } from "effect"
-import { ReactComponent, ReactHook } from "effect-fc"
+import { Component, Hook } from "effect-fc"
 
 
 export const Route = createFileRoute("/")({
-    component: ReactComponent.make(function* Index() {
+    component: Component.make(function* Index() {
         return yield* Effect.provide(
-            ReactComponent.use(Todos, Todos => <Todos />),
-            yield* ReactHook.useMemoLayer(TodosState.Default("todos")),
+            Component.use(Todos, Todos => <Todos />),
+            yield* Hook.useMemoLayer(TodosState.Default("todos")),
         )
     }, {
         finalizerExecutionMode: "fork"
     }).pipe(
-        ReactComponent.withRuntime(runtime.context),
+        Component.withRuntime(runtime.context),
     )
 })

packages/example/src/todo/Todo.tsx

@@ -2,7 +2,7 @@ import * as Domain from "@/domain"
 import { Button, Flex, TextArea } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Chunk, Effect, Match, Option, Ref, Runtime, SubscriptionRef } from "effect"
-import { ReactComponent, ReactHook } from "effect-fc"
+import { Component, Hook } from "effect-fc"
 import { SubscriptionSubRef } from "effect-fc/types"
 import * as React from "react"
 import { TodosState } from "./TodosState.service"
@@ -19,18 +19,18 @@ export type TodoProps = (
     }
 )
 
-export const Todo = ReactComponent.make(function* Todo(props: TodoProps) {
+export const Todo = Component.make(function* Todo(props: TodoProps) {
     const runtime = yield* Effect.runtime()
     const state = yield* TodosState
 
-    const ref = yield* ReactHook.useMemo(() => Match.value(props).pipe(
+    const ref = yield* Hook.useMemo(() => Match.value(props).pipe(
         Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
         Match.tag("edit", ({ ref }) => Effect.succeed(ref)),
         Match.exhaustive,
     ), [props._tag, props.ref])
 
     const contentRef = React.useMemo(() => SubscriptionSubRef.makeFromPath(ref, ["content"]), [ref])
-    const [todo] = yield* ReactHook.useSubscribeRefs(ref)
+    const [todo] = yield* Hook.useSubscribeRefs(ref)
 
     return (
         <Flex direction="column" align="stretch" gap="2">

packages/example/src/todo/Todos.tsx

@@ -1,18 +1,18 @@
 import { Container, Flex, Heading } from "@radix-ui/themes"
 import { Chunk } from "effect"
-import { ReactComponent, ReactHook } from "effect-fc"
+import { Component, Hook } from "effect-fc"
 import { SubscriptionSubRef } from "effect-fc/types"
 import * as React from "react"
 import { Todo } from "./Todo"
 import { TodosState } from "./TodosState.service"
 
 
-export const Todos = ReactComponent.make(function* Todos() {
+export const Todos = Component.make(function* Todos() {
     const state = yield* TodosState
-    const [todos] = yield* ReactHook.useSubscribeRefs(state.ref)
+    const [todos] = yield* Hook.useSubscribeRefs(state.ref)
 
-    const VTodosItem = yield* ReactComponent.useFC(TodosItem)
-    const VTodo = yield* ReactComponent.useFC(Todo)
+    const VTodosItem = yield* Component.useFC(TodosItem)
+    const VTodo = yield* Component.useFC(Todo)
 
     return (
         <Container>
@@ -34,14 +34,14 @@ interface TodosItemProps {
     readonly index: number
 }
 
-const TodosItem = ReactComponent.make(function* TodosItem(props: TodosItemProps) {
+const TodosItem = Component.make(function* TodosItem(props: TodosItemProps) {
     const state = yield* TodosState
     const ref = React.useMemo(() => SubscriptionSubRef.makeFromGetSet(state.ref, {
         get: parent => Chunk.unsafeGet(parent, props.index),
         set: (parent, v) => Chunk.replace(parent, props.index, v),
     }), [props.index, state.ref])
 
-    return yield* ReactComponent.use(Todo, Todo =>
+    return yield* Component.use(Todo, Todo =>
         <Todo _tag="edit" ref={ref} />
     )
 })