Component refactoring

packages/example/src/routes/index.tsx

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