Fix

packages/example/src/todo/Todo.tsx

@@ -6,7 +6,7 @@ import { Box, Button, Flex, IconButton } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Chunk, DateTime, Effect, Match, Option, Ref, Runtime, Schema, SubscriptionRef } from "effect"
 import { Component, Memo } from "effect-fc"
-import { Hooks, useOnce } from "effect-fc/hooks"
+import { useMemo, useOnce, useSubscribe } from "effect-fc/hooks"
 import { SubscriptionSubRef } from "effect-fc/types"
 import { FaArrowDown, FaArrowUp } from "react-icons/fa"
 import { FaDeleteLeft } from "react-icons/fa6"
@@ -35,7 +35,7 @@ export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps
     const runtime = yield* Effect.runtime()
     const state = yield* TodosState
 
-    const [ref, contentRef, completedAtRef] = yield* Hooks.useMemo(() => Match.value(props).pipe(
+    const [ref, contentRef, completedAtRef] = yield* useMemo(() => Match.value(props).pipe(
         Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
         Match.tag("edit", ({ index }) => Effect.succeed(SubscriptionSubRef.makeFromChunkRef(state.ref, index))),
         Match.exhaustive,
@@ -45,9 +45,10 @@ export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps
             SubscriptionSubRef.makeFromPath(ref, ["content"]),
             SubscriptionSubRef.makeFromPath(ref, ["completedAt"]),
         ] as const),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     ), [props._tag, props.index])
 
-    const [size] = yield* Hooks.useSubscribeRefs(state.sizeRef)
+    const [size] = yield* useSubscribe(state.sizeRef)
 
     const StringTextAreaInputFC = yield* StringTextAreaInput
     const OptionalDateInputFC = yield* OptionalDateInput

packages/example/src/todo/Todos.tsx

@@ -1,16 +1,16 @@
 import { Container, Flex, Heading } from "@radix-ui/themes"
 import { Chunk, Console, Effect } from "effect"
 import { Component } from "effect-fc"
-import { Hooks } from "effect-fc/hooks"
+import { useOnce, useSubscribe } from "effect-fc/hooks"
 import { Todo } from "./Todo"
 import { TodosState } from "./TodosState.service"
 
 
 export class Todos extends Component.makeUntraced(function* Todos() {
     const state = yield* TodosState
-    const [todos] = yield* Hooks.useSubscribeRefs(state.ref)
+    const [todos] = yield* useSubscribe(state.ref)
 
-    yield* Hooks.useOnce(() => Effect.andThen(
+    yield* useOnce(() => Effect.andThen(
         Console.log("Todos mounted"),
         Effect.addFinalizer(() => Console.log("Todos unmounted")),
     ))