packages/example/src/todo/Todo.tsx

@@ -42,7 +42,7 @@ export const Todo = Component.make(function* Todo(props: TodoProps) {
     ), [props._tag, props.index])
 
     const contentRef = React.useMemo(() => SubscriptionSubRef.makeFromPath(ref, ["content"]), [ref])
-    const [todo] = yield* Hook.useSubscribeRefs(ref)
+    const [todo, todosSize] = yield* Hook.useSubscribeRefs(ref, state.sizeRef)
 
     return (
         <Flex direction="column" align="stretch" gap="2">

packages/example/src/todo/TodosState.service.ts

@@ -2,6 +2,7 @@ import { Todo } from "@/domain"
 import { KeyValueStore } from "@effect/platform"
 import { BrowserKeyValueStore } from "@effect/platform-browser"
 import { Chunk, Console, Effect, Option, Schema, Stream, SubscriptionRef } from "effect"
+import { SubscriptionSubRef } from "effect-fc/types"
 
 
 export class TodosState extends Effect.Service<TodosState>()("TodosState", {
@@ -31,6 +32,7 @@ export class TodosState extends Effect.Service<TodosState>()("TodosState", {
         )
 
         const ref = yield* SubscriptionRef.make(yield* readFromLocalStorage)
+        const sizeRef = SubscriptionSubRef.makeFromPath(ref, ["length"])
 
         yield* Effect.forkScoped(ref.changes.pipe(
             Stream.debounce("500 millis"),
@@ -41,7 +43,7 @@ export class TodosState extends Effect.Service<TodosState>()("TodosState", {
             Effect.ignore,
         ))
 
-        return { ref } as const
+        return { ref, sizeRef } as const
     }),
 
     dependencies: [BrowserKeyValueStore.layerLocalStorage],