Update dependency @effect/language-service to ^0.48.0

packages/effect-fc/package.json

@@ -1,7 +1,7 @@
 {
   "name": "effect-fc",
   "description": "Write React function components with Effect",
-  "version": "0.2.0",
+  "version": "0.1.5",
   "type": "module",
   "files": [
     "./README.md",

packages/effect-fc/src/Async.ts

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as Component from "./Component.js"
 
 
-export const TypeId: unique symbol = Symbol.for("@effect-fc/Async/Async")
+export const TypeId: unique symbol = Symbol.for("effect-fc/Async/Async")
 export type TypeId = typeof TypeId
 
 export interface Async extends Async.Options {

packages/effect-fc/src/Component.ts

@@ -1,11 +1,11 @@
 /** biome-ignore-all lint/complexity/noBannedTypes: {} is the default type for React props */
 /** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
-import { Context, type Duration, Effect, Effectable, Equivalence, ExecutionStrategy, Exit, Fiber, Function, HashMap, Layer, ManagedRuntime, Option, Predicate, Ref, Runtime, Scope, Tracer, type Types, type Utils } from "effect"
+import { Context, Effect, Effectable, Equivalence, ExecutionStrategy, Exit, Fiber, Function, HashMap, Layer, ManagedRuntime, Option, Predicate, Ref, Runtime, Scope, Tracer, type Types, type Utils } from "effect"
 import * as React from "react"
 import { Memoized } from "./index.js"
 
 
-export const TypeId: unique symbol = Symbol.for("@effect-fc/Component/Component")
+export const TypeId: unique symbol = Symbol.for("effect-fc/Component/Component")
 export type TypeId = typeof TypeId
 
 export interface Component<P extends {}, A extends React.ReactNode, E, R>
@@ -39,11 +39,16 @@ export namespace Component {
 
     export interface Options {
         readonly displayName?: string
+        readonly finalizerExecutionMode: "sync" | "fork"
         readonly finalizerExecutionStrategy: ExecutionStrategy.ExecutionStrategy
-        readonly finalizerExecutionDebounce: Duration.DurationInput
     }
 }
 
+export interface ScopeOptions {
+    readonly finalizerExecutionMode?: "sync" | "fork"
+    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
+}
+
 
 const ComponentProto = Object.freeze({
     ...Effectable.CommitPrototype,
@@ -83,10 +88,10 @@ const ComponentProto = Object.freeze({
     },
 } as const)
 
-const defaultOptions: Component.Options = {
+const defaultOptions = {
+    finalizerExecutionMode: "fork",
     finalizerExecutionStrategy: ExecutionStrategy.sequential,
-    finalizerExecutionDebounce: "100 millis",
+} as const
-}
 
 const nonReactiveTags = [Tracer.ParentSpan] as const
 
@@ -403,7 +408,7 @@ export const withRuntime: {
 
 
 export class ScopeMap extends Effect.Service<ScopeMap>()("effect-fc/Component/ScopeMap", {
-    effect: Effect.bind(Effect.Do, "ref", () => Ref.make(HashMap.empty<object, ScopeMap.Entry>()))
+    effect: Effect.bind(Effect.Do, "ref", () => Ref.make(HashMap.empty<string, ScopeMap.Entry>()))
 }) {}
 
 export namespace ScopeMap {
@@ -414,44 +419,35 @@ export namespace ScopeMap {
 }
 
 
-export namespace useScope {
-    export interface Options {
-        readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
-        readonly finalizerExecutionDebounce?: Duration.DurationInput
-    }
-}
-
 export const useScope: {
     (
         deps: React.DependencyList,
-        options?: useScope.Options,
+        options?: ScopeOptions,
     ): Effect.Effect<Scope.Scope>
 } = Effect.fnUntraced(function*(deps, options) {
     // biome-ignore lint/style/noNonNullAssertion: context initialization
     const runtimeRef = React.useRef<Runtime.Runtime<never>>(null!)
     runtimeRef.current = yield* Effect.runtime()
 
+    const key = React.useId()
     const scopeMap = yield* ScopeMap as unknown as Effect.Effect<ScopeMap>
 
-    const [key, scope] = React.useMemo(() => Runtime.runSync(runtimeRef.current)(Effect.andThen(
+    const scope = React.useMemo(() => Runtime.runSync(runtimeRef.current)(Effect.andThen(
-        Effect.all([Effect.succeed({}), scopeMap.ref]),
+        scopeMap.ref,
-        ([key, map]) => Effect.andThen(
+        map => Option.match(HashMap.get(map, key), {
-            Option.match(HashMap.get(map, key), {
             onSome: entry => Effect.succeed(entry.scope),
             onNone: () => Effect.tap(
-                    Scope.make(options?.finalizerExecutionStrategy ?? defaultOptions.finalizerExecutionStrategy),
+                Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential),
                 scope => Ref.update(scopeMap.ref, HashMap.set(key, {
                     scope,
                     closeFiber: Option.none(),
-                    })),
+                }))
             ),
         }),
-            scope => [key, scope] as const,
-        ),
     // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
     )), deps)
 
-    // biome-ignore lint/correctness/useExhaustiveDependencies: only reactive on "key"
+    // biome-ignore lint/correctness/useExhaustiveDependencies: only reactive on "scope"
     React.useEffect(() => Runtime.runSync(runtimeRef.current)(scopeMap.ref.pipe(
         Effect.andThen(HashMap.get(key)),
         Effect.tap(entry => Option.match(entry.closeFiber, {
@@ -463,7 +459,7 @@ export const useScope: {
         })),
         Effect.map(({ scope }) =>
             () => Runtime.runSync(runtimeRef.current)(Effect.andThen(
-                Effect.forkDaemon(Effect.sleep(options?.finalizerExecutionDebounce ?? defaultOptions.finalizerExecutionDebounce).pipe(
+                Effect.forkDaemon(Effect.sleep("100 millis").pipe(
                     Effect.andThen(Scope.close(scope, Exit.void)),
                     Effect.andThen(Ref.update(scopeMap.ref, HashMap.remove(key))),
                 )),
@@ -473,11 +469,26 @@ export const useScope: {
                 })),
             ))
         ),
-    )), [key])
+    )), [scope])
 
     return scope
 })
 
+const closeScope = (
+    scope: Scope.CloseableScope,
+    runtime: Runtime.Runtime<never>,
+    options?: ScopeOptions,
+) => {
+    switch (options?.finalizerExecutionMode ?? "sync") {
+        case "sync":
+            Runtime.runSync(runtime)(Scope.close(scope, Exit.void))
+            break
+        case "fork":
+            Runtime.runFork(runtime)(Scope.close(scope, Exit.void))
+            break
+    }
+}
+
 export const useOnMount: {
     <A, E, R>(
         f: () => Effect.Effect<A, E, R>
@@ -489,93 +500,66 @@ export const useOnMount: {
     return yield* React.useState(() => Runtime.runSync(runtime)(Effect.cached(f())))[0]
 })
 
-export namespace useOnChange {
-    export type Options = useScope.Options
-}
-
 export const useOnChange: {
     <A, E, R>(
         f: () => Effect.Effect<A, E, R>,
         deps: React.DependencyList,
-        options?: useOnChange.Options,
+    ): Effect.Effect<A, E, R>
-    ): Effect.Effect<A, E, Exclude<R, Scope.Scope>>
 } = Effect.fnUntraced(function* <A, E, R>(
     f: () => Effect.Effect<A, E, R>,
     deps: React.DependencyList,
-    options?: useOnChange.Options,
 ) {
-    const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+    const runtime = yield* Effect.runtime<R>()
-    const scope = yield* useScope(deps, options)
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
-
+    return yield* React.useMemo(() => Runtime.runSync(runtime)(Effect.cached(f())), deps)
-    // biome-ignore lint/correctness/useExhaustiveDependencies: only reactive on "scope"
-    return yield* React.useMemo(() => Runtime.runSync(runtime)(
-        Effect.cached(Effect.provideService(f(), Scope.Scope, scope))
-    ), [scope])
 })
 
-export namespace useReactEffect {
-    export interface Options {
-        readonly finalizerExecutionMode?: "sync" | "fork"
-        readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
-    }
-}
-
 export const useReactEffect: {
     <E, R>(
         f: () => Effect.Effect<void, E, R>,
         deps?: React.DependencyList,
-        options?: useReactEffect.Options,
+        options?: ScopeOptions,
     ): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
 } = Effect.fnUntraced(function* <E, R>(
     f: () => Effect.Effect<void, E, R>,
     deps?: React.DependencyList,
-    options?: useReactEffect.Options,
+    options?: ScopeOptions,
 ) {
     const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
-    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
-    React.useEffect(() => runReactEffect(runtime, f, options), deps)
-})
 
-const runReactEffect = <E, R>(
+    React.useEffect(() => Effect.Do.pipe(
-    runtime: Runtime.Runtime<Exclude<R, Scope.Scope>>,
+        Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)),
-    f: () => Effect.Effect<void, E, R>,
-    options?: useReactEffect.Options,
-) => Effect.Do.pipe(
-    Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? defaultOptions.finalizerExecutionStrategy)),
         Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(f(), Scope.Scope, scope))),
         Effect.map(({ scope }) =>
-        () => {
+            () => closeScope(scope, runtime, options)
-            switch (options?.finalizerExecutionMode ?? "fork") {
-                case "sync":
-                    Runtime.runSync(runtime)(Scope.close(scope, Exit.void))
-                    break
-                case "fork":
-                    Runtime.runFork(runtime)(Scope.close(scope, Exit.void))
-                    break
-            }
-        }
         ),
         Runtime.runSync(runtime),
-)
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
-
+    ), deps)
-export namespace useReactLayoutEffect {
+})
-    export type Options = useReactEffect.Options
-}
 
 export const useReactLayoutEffect: {
     <E, R>(
         f: () => Effect.Effect<void, E, R>,
         deps?: React.DependencyList,
-        options?: useReactLayoutEffect.Options,
+        options?: ScopeOptions,
     ): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
 } = Effect.fnUntraced(function* <E, R>(
     f: () => Effect.Effect<void, E, R>,
     deps?: React.DependencyList,
-    options?: useReactLayoutEffect.Options,
+    options?: ScopeOptions,
 ) {
     const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+
+    React.useLayoutEffect(() => Effect.Do.pipe(
+        Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)),
+        Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(f(), Scope.Scope, scope))),
+        Effect.map(({ scope }) =>
+            () => closeScope(scope, runtime, options)
+        ),
+        Runtime.runSync(runtime),
     // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
-    React.useLayoutEffect(() => runReactEffect(runtime, f, options), deps)
+    ), deps)
 })
 
 export const useCallbackSync: {
@@ -612,18 +596,14 @@ export const useCallbackPromise: {
     return React.useCallback((...args: Args) => Runtime.runPromise(runtimeRef.current)(f(...args)), deps)
 })
 
-export namespace useContext {
-    export type Options = useScope.Options
-}
-
 export const useContext: {
     <ROut, E, RIn>(
         layer: Layer.Layer<ROut, E, RIn>,
-        options?: useContext.Options,
+        options?: ScopeOptions,
     ): Effect.Effect<Context.Context<ROut>, E, RIn>
 } = Effect.fnUntraced(function* <ROut, E, RIn>(
     layer: Layer.Layer<ROut, E, RIn>,
-    options?: useContext.Options,
+    options?: ScopeOptions,
 ) {
     const scope = yield* useScope([layer], options)
 

packages/effect-fc/src/Form.ts

@@ -9,7 +9,7 @@ import * as SubscriptionRef from "./SubscriptionRef.js"
 import * as SubscriptionSubRef from "./SubscriptionSubRef.js"
 
 
-export const FormTypeId: unique symbol = Symbol.for("@effect-fc/Form/Form")
+export const FormTypeId: unique symbol = Symbol.for("effect-fc/Form/Form")
 export type FormTypeId = typeof FormTypeId
 
 export interface Form<in out A, in out I = A, out R = never, in out SA = void, in out SE = A, out SR = never>

packages/effect-fc/src/Hooks/ScopeOptions.ts

@@ -0,0 +1,7 @@
+import type { ExecutionStrategy } from "effect"
+
+
+export interface ScopeOptions {
+    readonly finalizerExecutionMode?: "sync" | "fork"
+    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
+}

packages/effect-fc/src/Hooks/index.ts

@@ -0,0 +1,16 @@
+export * from "./input/index.js"
+export * from "./ScopeOptions.js"
+export * from "./useCallbackPromise.js"
+export * from "./useCallbackSync.js"
+export * from "./useContext.js"
+export * from "./useEffect.js"
+export * from "./useFork.js"
+export * from "./useLayoutEffect.js"
+export * from "./useMemo.js"
+export * from "./useOnce.js"
+export * from "./useRefFromState.js"
+export * from "./useRefState.js"
+export * from "./useScope.js"
+export * from "./useStreamFromReactiveValues.js"
+export * from "./useSubscribables.js"
+export * from "./useSubscribeStream.js"

packages/effect-fc/src/Hooks/input/index.ts

@@ -0,0 +1,2 @@
+export * from "./useInput.js"
+export * from "./useOptionalInput.js"

packages/effect-fc/src/Hooks/input/useInput.ts

@@ -0,0 +1,67 @@
+import { type Duration, Effect, Equal, Equivalence, flow, identity, Option, type ParseResult, Ref, Schema, Stream, SubscriptionRef } from "effect"
+import * as React from "react"
+import { useFork } from "../useFork.js"
+import { useOnce } from "../useOnce.js"
+import { useRefState } from "../useRefState.js"
+
+
+export namespace useInput {
+    export interface Options<A, R> {
+        readonly schema: Schema.Schema<A, string, R>
+        readonly equivalence?: Equivalence.Equivalence<A>
+        readonly ref: SubscriptionRef.SubscriptionRef<A>
+        readonly debounce?: Duration.DurationInput
+    }
+
+    export interface Result {
+        readonly value: string
+        readonly setValue: React.Dispatch<React.SetStateAction<string>>
+        readonly error: Option.Option<ParseResult.ParseError>
+    }
+}
+
+export const useInput: {
+    <A, R>(options: useInput.Options<A, R>): Effect.Effect<useInput.Result, ParseResult.ParseError, R>
+} = Effect.fnUntraced(function* <A, R>(options: useInput.Options<A, R>) {
+    const internalRef = yield* useOnce(() => options.ref.pipe(
+        Effect.andThen(Schema.encode(options.schema)),
+        Effect.andThen(SubscriptionRef.make),
+    ))
+    const [error, setError] = React.useState(Option.none<ParseResult.ParseError>())
+
+    yield* useFork(() => Effect.all([
+        // Sync the upstream state with the internal state
+        // Only mutate the internal state if the upstream value is actually different. This avoids infinite re-render loops.
+        Stream.runForEach(Stream.changesWith(options.ref.changes, Equivalence.strict()), upstreamValue =>
+            Effect.whenEffect(
+                Effect.andThen(
+                    Schema.encode(options.schema)(upstreamValue),
+                    encodedUpstreamValue => Ref.set(internalRef, encodedUpstreamValue),
+                ),
+                internalRef.pipe(
+                    Effect.andThen(Schema.decode(options.schema)),
+                    Effect.andThen(decodedInternalValue => !(options.equivalence ?? Equal.equals)(upstreamValue, decodedInternalValue)),
+                    Effect.catchTag("ParseError", () => Effect.succeed(false)),
+                ),
+            )
+        ),
+
+        // Sync all changes to the internal state with upstream
+        Stream.runForEach(
+            internalRef.changes.pipe(
+                Stream.changesWith(Equivalence.strict()),
+                options.debounce ? Stream.debounce(options.debounce) : identity,
+                Stream.drop(1),
+            ),
+            flow(
+                Schema.decode(options.schema),
+                Effect.andThen(v => Ref.set(options.ref, v)),
+                Effect.andThen(() => setError(Option.none())),
+                Effect.catchTag("ParseError", e => Effect.sync(() => setError(Option.some(e)))),
+            ),
+        ),
+    ], { concurrency: "unbounded" }), [options.schema, options.equivalence, options.ref, options.debounce, internalRef])
+
+    const [value, setValue] = yield* useRefState(internalRef)
+    return { value, setValue, error }
+})

packages/effect-fc/src/Hooks/input/useOptionalInput.ts

@@ -0,0 +1,107 @@
+import { type Duration, Effect, Equal, Equivalence, flow, identity, Option, type ParseResult, Ref, Schema, Stream, SubscriptionRef } from "effect"
+import * as React from "react"
+import * as SetStateAction from "../../SetStateAction.js"
+import { useCallbackSync } from "../useCallbackSync.js"
+import { useFork } from "../useFork.js"
+import { useOnce } from "../useOnce.js"
+import { useRefState } from "../useRefState.js"
+import { useSubscribables } from "../useSubscribables.js"
+
+
+export namespace useOptionalInput {
+    export interface Options<A, R> {
+        readonly schema: Schema.Schema<A, string, R>
+        readonly defaultValue?: A
+        readonly equivalence?: Equivalence.Equivalence<A>
+        readonly ref: SubscriptionRef.SubscriptionRef<Option.Option<A>>
+        readonly debounce?: Duration.DurationInput
+    }
+
+    export interface Result {
+        readonly value: string
+        readonly setValue: React.Dispatch<React.SetStateAction<string>>
+        readonly enabled: boolean
+        readonly setEnabled: React.Dispatch<React.SetStateAction<boolean>>
+        readonly error: Option.Option<ParseResult.ParseError>
+    }
+}
+
+export const useOptionalInput: {
+    <A, R>(options: useOptionalInput.Options<A, R>): Effect.Effect<useOptionalInput.Result, ParseResult.ParseError, R>
+} = Effect.fnUntraced(function* <A, R>(options: useOptionalInput.Options<A, R>) {
+    const [internalRef, enabledRef] = yield* useOnce(() => Effect.andThen(options.ref, upstreamValue =>
+        Effect.all([
+            Effect.andThen(
+                Option.match(upstreamValue, {
+                    onSome: Schema.encode(options.schema),
+                    onNone: () => options.defaultValue
+                        ? Schema.encode(options.schema)(options.defaultValue)
+                        : Effect.succeed(""),
+                }),
+                SubscriptionRef.make,
+            ),
+
+            SubscriptionRef.make(Option.isSome(upstreamValue)),
+        ])
+    ))
+
+    const [error, setError] = React.useState(Option.none<ParseResult.ParseError>())
+
+    yield* useFork(() => Effect.all([
+        // Sync the upstream state with the internal state
+        // Only mutate the internal state if the upstream value is actually different. This avoids infinite re-render loops.
+        Stream.runForEach(Stream.changesWith(options.ref.changes, Equivalence.strict()), Option.match({
+            onSome: upstreamValue => Effect.andThen(
+                Ref.set(enabledRef, true),
+
+                Effect.whenEffect(
+                    Effect.andThen(
+                        Schema.encode(options.schema)(upstreamValue),
+                        encodedUpstreamValue => Ref.set(internalRef, encodedUpstreamValue),
+                    ),
+                    internalRef.pipe(
+                        Effect.andThen(Schema.decode(options.schema)),
+                        Effect.andThen(decodedInternalValue => !(options.equivalence ?? Equal.equals)(upstreamValue, decodedInternalValue)),
+                        Effect.catchTag("ParseError", () => Effect.succeed(false)),
+                    ),
+                ),
+            ),
+
+            onNone: () => Ref.set(enabledRef, false),
+        })),
+
+        // Sync all changes to the internal state with upstream
+        Stream.runForEach(
+            internalRef.changes.pipe(
+                Stream.changesWith(Equivalence.strict()),
+                options.debounce ? Stream.debounce(options.debounce) : identity,
+                Stream.drop(1),
+            ),
+            flow(
+                Schema.decode(options.schema),
+                Effect.andThen(v => Ref.set(options.ref, Option.some(v))),
+                Effect.andThen(() => setError(Option.none())),
+                Effect.catchTag("ParseError", e => Effect.sync(() => setError(Option.some(e)))),
+            ),
+        ),
+    ], { concurrency: "unbounded" }), [options.schema, options.equivalence, options.ref, options.debounce, internalRef])
+
+    const setEnabled = yield* useCallbackSync(
+        (setStateAction: React.SetStateAction<boolean>) => Effect.andThen(
+            Ref.updateAndGet(enabledRef, prevState => SetStateAction.value(setStateAction, prevState)),
+            enabled => enabled
+                ? internalRef.pipe(
+                    Effect.andThen(Schema.decode(options.schema)),
+                    Effect.andThen(v => Ref.set(options.ref, Option.some(v))),
+                    Effect.andThen(() => setError(Option.none())),
+                    Effect.catchTag("ParseError", e => Effect.sync(() => setError(Option.some(e)))),
+                )
+                : Ref.set(options.ref, Option.none()),
+        ),
+        [options.schema, options.ref, internalRef, enabledRef],
+    )
+
+    const [enabled] = yield* useSubscribables(enabledRef)
+    const [value, setValue] = yield* useRefState(internalRef)
+    return { value, setValue, enabled, setEnabled, error }
+})

packages/effect-fc/src/Hooks/internal.ts

@@ -0,0 +1,18 @@
+import { Exit, Runtime, Scope } from "effect"
+import type { ScopeOptions } from "./ScopeOptions.js"
+
+
+export const closeScope = (
+    scope: Scope.CloseableScope,
+    runtime: Runtime.Runtime<never>,
+    options?: ScopeOptions,
+) => {
+    switch (options?.finalizerExecutionMode ?? "sync") {
+        case "sync":
+            Runtime.runSync(runtime)(Scope.close(scope, Exit.void))
+            break
+        case "fork":
+            Runtime.runFork(runtime)(Scope.close(scope, Exit.void))
+            break
+    }
+}

packages/effect-fc/src/Hooks/useCallbackPromise.ts

@@ -0,0 +1,20 @@
+import { Effect, Runtime } from "effect"
+import * as React from "react"
+
+
+export const useCallbackPromise: {
+    <Args extends unknown[], A, E, R>(
+        callback: (...args: Args) => Effect.Effect<A, E, R>,
+        deps: React.DependencyList,
+    ): Effect.Effect<(...args: Args) => Promise<A>, never, R>
+} = Effect.fnUntraced(function* <Args extends unknown[], A, E, R>(
+    callback: (...args: Args) => Effect.Effect<A, E, R>,
+    deps: React.DependencyList,
+) {
+    // biome-ignore lint/style/noNonNullAssertion: context initialization
+    const runtimeRef = React.useRef<Runtime.Runtime<R>>(null!)
+    runtimeRef.current = yield* Effect.runtime<R>()
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
+    return React.useCallback((...args: Args) => Runtime.runPromise(runtimeRef.current)(callback(...args)), deps)
+})

packages/effect-fc/src/Hooks/useCallbackSync.ts

@@ -0,0 +1,20 @@
+import { Effect, Runtime } from "effect"
+import * as React from "react"
+
+
+export const useCallbackSync: {
+    <Args extends unknown[], A, E, R>(
+        callback: (...args: Args) => Effect.Effect<A, E, R>,
+        deps: React.DependencyList,
+    ): Effect.Effect<(...args: Args) => A, never, R>
+} = Effect.fnUntraced(function* <Args extends unknown[], A, E, R>(
+    callback: (...args: Args) => Effect.Effect<A, E, R>,
+    deps: React.DependencyList,
+) {
+    // biome-ignore lint/style/noNonNullAssertion: context initialization
+    const runtimeRef = React.useRef<Runtime.Runtime<R>>(null!)
+    runtimeRef.current = yield* Effect.runtime<R>()
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
+    return React.useCallback((...args: Args) => Runtime.runSync(runtimeRef.current)(callback(...args)), deps)
+})

packages/effect-fc/src/Hooks/useContext.ts

@@ -0,0 +1,25 @@
+import { type Context, Effect, Layer, ManagedRuntime, Scope } from "effect"
+import type { ScopeOptions } from "./ScopeOptions.js"
+import { useMemo } from "./useMemo.js"
+import { useScope } from "./useScope.js"
+
+
+export const useContext: {
+    <ROut, E, RIn>(
+        layer: Layer.Layer<ROut, E, RIn>,
+        options?: ScopeOptions,
+    ): Effect.Effect<Context.Context<ROut>, E, RIn>
+} = Effect.fnUntraced(function* <ROut, E, RIn>(
+    layer: Layer.Layer<ROut, E, RIn>,
+    options?: ScopeOptions,
+) {
+    const scope = yield* useScope([layer], options)
+
+    return yield* useMemo(() => Effect.context<RIn>().pipe(
+        Effect.map(context => ManagedRuntime.make(Layer.provide(layer, Layer.succeedContext(context)))),
+        Effect.tap(runtime => Effect.addFinalizer(() => runtime.disposeEffect)),
+        Effect.andThen(runtime => runtime.runtimeEffect),
+        Effect.andThen(runtime => runtime.context),
+        Effect.provideService(Scope.Scope, scope),
+    ), [scope])
+})

packages/effect-fc/src/Hooks/useEffect.ts

@@ -0,0 +1,29 @@
+import { Effect, ExecutionStrategy, Runtime, Scope } from "effect"
+import * as React from "react"
+import { closeScope } from "./internal.js"
+import type { ScopeOptions } from "./ScopeOptions.js"
+
+
+export const useEffect: {
+    <E, R>(
+        effect: () => Effect.Effect<void, E, R>,
+        deps?: React.DependencyList,
+        options?: ScopeOptions,
+    ): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
+} = Effect.fnUntraced(function* <E, R>(
+    effect: () => Effect.Effect<void, E, R>,
+    deps?: React.DependencyList,
+    options?: ScopeOptions,
+) {
+    const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+
+    React.useEffect(() => Effect.Do.pipe(
+        Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)),
+        Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(effect(), Scope.Scope, scope))),
+        Effect.map(({ scope }) =>
+            () => closeScope(scope, runtime, options)
+        ),
+        Runtime.runSync(runtime),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
+    ), deps)
+})

packages/effect-fc/src/Hooks/useFork.ts

@@ -0,0 +1,32 @@
+import { Effect, ExecutionStrategy, Runtime, Scope } from "effect"
+import * as React from "react"
+import { closeScope } from "./internal.js"
+import type { ScopeOptions } from "./ScopeOptions.js"
+
+
+export const useFork: {
+    <E, R>(
+        effect: () => Effect.Effect<void, E, R>,
+        deps?: React.DependencyList,
+        options?: Runtime.RunForkOptions & ScopeOptions,
+    ): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
+} = Effect.fnUntraced(function* <E, R>(
+    effect: () => Effect.Effect<void, E, R>,
+    deps?: React.DependencyList,
+    options?: Runtime.RunForkOptions & ScopeOptions,
+) {
+    const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+
+    React.useEffect(() => {
+        const scope = Runtime.runSync(runtime)(options?.scope
+            ? Scope.fork(options.scope, options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
+            : Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
+        )
+        Runtime.runFork(runtime)(Effect.provideService(effect(), Scope.Scope, scope), { ...options, scope })
+        return () => closeScope(scope, runtime, {
+            ...options,
+            finalizerExecutionMode: options?.finalizerExecutionMode ?? "fork",
+        })
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
+    }, deps)
+})

packages/effect-fc/src/Hooks/useLayoutEffect.ts

@@ -0,0 +1,29 @@
+import { Effect, ExecutionStrategy, Runtime, Scope } from "effect"
+import * as React from "react"
+import { closeScope } from "./internal.js"
+import type { ScopeOptions } from "./ScopeOptions.js"
+
+
+export const useLayoutEffect: {
+    <E, R>(
+        effect: () => Effect.Effect<void, E, R>,
+        deps?: React.DependencyList,
+        options?: ScopeOptions,
+    ): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
+} = Effect.fnUntraced(function* <E, R>(
+    effect: () => Effect.Effect<void, E, R>,
+    deps?: React.DependencyList,
+    options?: ScopeOptions,
+) {
+    const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+
+    React.useLayoutEffect(() => Effect.Do.pipe(
+        Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)),
+        Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(effect(), Scope.Scope, scope))),
+        Effect.map(({ scope }) =>
+            () => closeScope(scope, runtime, options)
+        ),
+        Runtime.runSync(runtime),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
+    ), deps)
+})

packages/effect-fc/src/Hooks/useMemo.ts

@@ -0,0 +1,17 @@
+import { Effect, Runtime } from "effect"
+import * as React from "react"
+
+
+export const useMemo: {
+    <A, E, R>(
+        factory: () => Effect.Effect<A, E, R>,
+        deps: React.DependencyList,
+    ): Effect.Effect<A, E, R>
+} = Effect.fnUntraced(function* <A, E, R>(
+    factory: () => Effect.Effect<A, E, R>,
+    deps: React.DependencyList,
+) {
+    const runtime = yield* Effect.runtime()
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
+    return yield* React.useMemo(() => Runtime.runSync(runtime)(Effect.cached(factory())), deps)
+})

packages/effect-fc/src/Hooks/useOnce.ts

@@ -0,0 +1,11 @@
+import { Effect } from "effect"
+import { useMemo } from "./useMemo.js"
+
+
+export const useOnce: {
+    <A, E, R>(factory: () => Effect.Effect<A, E, R>): Effect.Effect<A, E, R>
+} = Effect.fnUntraced(function* <A, E, R>(
+    factory: () => Effect.Effect<A, E, R>
+) {
+    return yield* useMemo(factory, [])
+})

packages/effect-fc/src/Hooks/useRefFromState.ts

@@ -0,0 +1,20 @@
+import { Effect, Equivalence, Ref, Stream, SubscriptionRef } from "effect"
+import type * as React from "react"
+import { useEffect } from "./useEffect.js"
+import { useFork } from "./useFork.js"
+import { useOnce } from "./useOnce.js"
+
+
+export const useRefFromState: {
+    <A>(state: readonly [A, React.Dispatch<React.SetStateAction<A>>]): Effect.Effect<SubscriptionRef.SubscriptionRef<A>>
+} = Effect.fnUntraced(function*([value, setValue]) {
+    const ref = yield* useOnce(() => SubscriptionRef.make(value))
+
+    yield* useEffect(() => Ref.set(ref, value), [value])
+    yield* useFork(() => Stream.runForEach(
+        Stream.changesWith(ref.changes, Equivalence.strict()),
+        v => Effect.sync(() => setValue(v)),
+    ), [setValue])
+
+    return ref
+})

packages/effect-fc/src/Hooks/useRefState.ts

@@ -0,0 +1,29 @@
+import { Effect, Equivalence, Ref, Stream, type SubscriptionRef } from "effect"
+import * as React from "react"
+import * as SetStateAction from "../SetStateAction.js"
+import { useCallbackSync } from "./useCallbackSync.js"
+import { useFork } from "./useFork.js"
+import { useOnce } from "./useOnce.js"
+
+
+export const useRefState: {
+    <A>(
+        ref: SubscriptionRef.SubscriptionRef<A>
+    ): Effect.Effect<readonly [A, React.Dispatch<React.SetStateAction<A>>]>
+} = Effect.fnUntraced(function* <A>(ref: SubscriptionRef.SubscriptionRef<A>) {
+    const [reactStateValue, setReactStateValue] = React.useState(yield* useOnce(() => ref))
+
+    yield* useFork(() => Stream.runForEach(
+        Stream.changesWith(ref.changes, Equivalence.strict()),
+        v => Effect.sync(() => setReactStateValue(v)),
+    ), [ref])
+
+    const setValue = yield* useCallbackSync((setStateAction: React.SetStateAction<A>) =>
+        Effect.andThen(
+            Ref.updateAndGet(ref, prevState => SetStateAction.value(setStateAction, prevState)),
+            v => setReactStateValue(v),
+        ),
+    [ref])
+
+    return [reactStateValue, setValue]
+})

packages/effect-fc/src/Hooks/useScope.ts

@@ -0,0 +1,38 @@
+import { Effect, ExecutionStrategy, Ref, Runtime, Scope } from "effect"
+import * as React from "react"
+import { closeScope } from "./internal.js"
+import type { ScopeOptions } from "./ScopeOptions.js"
+
+
+export const useScope: {
+    (
+        deps: React.DependencyList,
+        options?: ScopeOptions,
+    ): Effect.Effect<Scope.Scope>
+} = Effect.fnUntraced(function*(deps, options) {
+    const runtime = yield* Effect.runtime()
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: no reactivity needed
+    const [isInitialRun, initialScope] = React.useMemo(() => Runtime.runSync(runtime)(Effect.all([
+        Ref.make(true),
+        Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential),
+    ])), [])
+    const [scope, setScope] = React.useState(initialScope)
+
+    React.useEffect(() => Runtime.runSync(runtime)(
+        Effect.if(isInitialRun, {
+            onTrue: () => Effect.as(
+                Ref.set(isInitialRun, false),
+                () => closeScope(scope, runtime, options),
+            ),
+
+            onFalse: () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential).pipe(
+                Effect.tap(scope => Effect.sync(() => setScope(scope))),
+                Effect.map(scope => () => closeScope(scope, runtime, options)),
+            ),
+        })
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
+    ), deps)
+
+    return scope
+})

packages/effect-fc/src/Hooks/useStreamFromReactiveValues.ts

@@ -0,0 +1,30 @@
+import { Effect, PubSub, Ref, type Scope, Stream } from "effect"
+import type * as React from "react"
+import { useEffect } from "./useEffect.js"
+import { useOnce } from "./useOnce.js"
+
+
+export const useStreamFromReactiveValues: {
+    <const A extends React.DependencyList>(
+        values: A
+    ): Effect.Effect<Stream.Stream<A>, never, Scope.Scope>
+} = Effect.fnUntraced(function* <const A extends React.DependencyList>(values: A) {
+    const { latest, pubsub, stream } = yield* useOnce(() => Effect.Do.pipe(
+        Effect.bind("latest", () => Ref.make(values)),
+        Effect.bind("pubsub", () => Effect.acquireRelease(PubSub.unbounded<A>(), PubSub.shutdown)),
+        Effect.let("stream", ({ latest, pubsub }) => latest.pipe(
+            Effect.flatMap(a => Effect.map(
+                Stream.fromPubSub(pubsub, { scoped: true }),
+                s => Stream.concat(Stream.make(a), s),
+            )),
+            Stream.unwrapScoped,
+        )),
+    ))
+
+    yield* useEffect(() => Ref.set(latest, values).pipe(
+        Effect.andThen(PubSub.publish(pubsub, values)),
+        Effect.unlessEffect(PubSub.isShutdown(pubsub)),
+    ), values)
+
+    return stream
+})

packages/effect-fc/src/Hooks/useSubscribables.ts

@@ -0,0 +1,31 @@
+import { Effect, Equivalence, pipe, Stream, type Subscribable } from "effect"
+import * as React from "react"
+import { useFork } from "./useFork.js"
+import { useOnce } from "./useOnce.js"
+
+
+export const useSubscribables: {
+    <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
+        ...elements: T
+    ): Effect.Effect<
+        { [K in keyof T]: Effect.Effect.Success<T[K]["get"]> | Stream.Stream.Success<T[K]["changes"]> },
+        Effect.Effect.Error<T[number]["get"]> | Stream.Stream.Error<T[number]["changes"]>,
+        Effect.Effect.Context<T[number]["get"]> | Stream.Stream.Context<T[number]["changes"]>
+    >
+} = Effect.fnUntraced(function* <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
+    ...elements: T
+) {
+    const [reactStateValue, setReactStateValue] = React.useState(yield* useOnce(() =>
+        Effect.all(elements.map(v => v.get))
+    ))
+
+    yield* useFork(() => pipe(
+        elements.map(ref => Stream.changesWith(ref.changes, Equivalence.strict())),
+        streams => Stream.zipLatestAll(...streams),
+        Stream.runForEach(v =>
+            Effect.sync(() => setReactStateValue(v))
+        ),
+    ), elements)
+
+    return reactStateValue as any
+})

packages/effect-fc/src/Hooks/useSubscribeStream.ts

@@ -0,0 +1,32 @@
+import { Effect, Equivalence, Option, Stream } from "effect"
+import * as React from "react"
+import { useFork } from "./useFork.js"
+
+
+export const useSubscribeStream: {
+    <A, E, R>(
+        stream: Stream.Stream<A, E, R>
+    ): Effect.Effect<Option.Option<A>, never, R>
+    <A extends NonNullable<unknown>, E, R>(
+        stream: Stream.Stream<A, E, R>,
+        initialValue: A,
+    ): Effect.Effect<Option.Some<A>, never, R>
+} = Effect.fnUntraced(function* <A extends NonNullable<unknown>, E, R>(
+    stream: Stream.Stream<A, E, R>,
+    initialValue?: A,
+) {
+    const [reactStateValue, setReactStateValue] = React.useState(
+        // biome-ignore lint/correctness/useExhaustiveDependencies: no reactivity needed
+        React.useMemo(() => initialValue
+            ? Option.some(initialValue)
+            : Option.none(),
+        [])
+    )
+
+    yield* useFork(() => Stream.runForEach(
+        Stream.changesWith(stream, Equivalence.strict()),
+        v => Effect.sync(() => setReactStateValue(Option.some(v))),
+    ), [stream])
+
+    return reactStateValue as Option.Some<A>
+})

packages/effect-fc/src/Memoized.ts

@@ -3,7 +3,7 @@ import { type Equivalence, Function, Predicate } from "effect"
 import type * as Component from "./Component.js"
 
 
-export const TypeId: unique symbol = Symbol.for("@effect-fc/Memoized/Memoized")
+export const TypeId: unique symbol = Symbol.for("effect-fc/Memoized/Memoized")
 export type TypeId = typeof TypeId
 
 export interface Memoized<P> extends Memoized.Options<P> {

packages/effect-fc/src/ReactRuntime.ts

@@ -4,7 +4,7 @@ import * as React from "react"
 import * as Component from "./Component.js"
 
 
-export const TypeId: unique symbol = Symbol.for("@effect-fc/ReactRuntime/ReactRuntime")
+export const TypeId: unique symbol = Symbol.for("effect-fc/ReactRuntime/ReactRuntime")
 export type TypeId = typeof TypeId
 
 export interface ReactRuntime<R, ER> {

packages/effect-fc/src/Stream.ts

@@ -1,58 +0,0 @@
-import { Effect, Equivalence, Option, PubSub, Ref, type Scope, Stream } from "effect"
-import * as React from "react"
-import * as Component from "./Component.js"
-
-
-export const useStream: {
-    <A, E, R>(
-        stream: Stream.Stream<A, E, R>
-    ): Effect.Effect<Option.Option<A>, never, R>
-    <A extends NonNullable<unknown>, E, R>(
-        stream: Stream.Stream<A, E, R>,
-        initialValue: A,
-    ): Effect.Effect<Option.Some<A>, never, R>
-} = Effect.fnUntraced(function* <A extends NonNullable<unknown>, E, R>(
-    stream: Stream.Stream<A, E, R>,
-    initialValue?: A,
-) {
-    const [reactStateValue, setReactStateValue] = React.useState(() => initialValue
-        ? Option.some(initialValue)
-        : Option.none()
-    )
-
-    yield* Component.useReactEffect(() => Effect.forkScoped(
-        Stream.runForEach(
-            Stream.changesWith(stream, Equivalence.strict()),
-            v => Effect.sync(() => setReactStateValue(Option.some(v))),
-        )
-    ), [stream])
-
-    return reactStateValue as Option.Some<A>
-})
-
-export const useStreamFromReactiveValues: {
-    <const A extends React.DependencyList>(
-        values: A
-    ): Effect.Effect<Stream.Stream<A>, never, Scope.Scope>
-} = Effect.fnUntraced(function* <const A extends React.DependencyList>(values: A) {
-    const { latest, pubsub, stream } = yield* Component.useOnMount(() => Effect.Do.pipe(
-        Effect.bind("latest", () => Ref.make(values)),
-        Effect.bind("pubsub", () => Effect.acquireRelease(PubSub.unbounded<A>(), PubSub.shutdown)),
-        Effect.let("stream", ({ latest, pubsub }) => latest.pipe(
-            Effect.flatMap(a => Effect.map(
-                Stream.fromPubSub(pubsub, { scoped: true }),
-                s => Stream.concat(Stream.make(a), s),
-            )),
-            Stream.unwrapScoped,
-        )),
-    ))
-
-    yield* Component.useReactEffect(() => Ref.set(latest, values).pipe(
-        Effect.andThen(PubSub.publish(pubsub, values)),
-        Effect.unlessEffect(PubSub.isShutdown(pubsub)),
-    ), values)
-
-    return stream
-})
-
-export * from "effect/Stream"

packages/effect-fc/src/Subscribable.ts

@@ -33,7 +33,7 @@ export const useSubscribables: {
         yield* Component.useOnMount(() => Effect.all(elements.map(v => v.get)))
     )
 
-    yield* Component.useReactEffect(() => Effect.forkScoped(pipe(
+    yield* Component.useOnChange(() => Effect.forkScoped(pipe(
         elements.map(ref => Stream.changesWith(ref.changes, Equivalence.strict())),
         streams => Stream.zipLatestAll(...streams),
         Stream.runForEach(v =>

packages/effect-fc/src/SubscriptionRef.ts

@@ -11,12 +11,10 @@ export const useSubscriptionRefState: {
 } = Effect.fnUntraced(function* <A>(ref: SubscriptionRef.SubscriptionRef<A>) {
     const [reactStateValue, setReactStateValue] = React.useState(yield* Component.useOnMount(() => ref))
 
-    yield* Component.useReactEffect(() => Effect.forkScoped(
+    yield* Component.useOnChange(() => Effect.forkScoped(Stream.runForEach(
-        Stream.runForEach(
         Stream.changesWith(ref.changes, Equivalence.strict()),
         v => Effect.sync(() => setReactStateValue(v)),
-        )
+    )), [ref])
-    ), [ref])
 
     const setValue = yield* Component.useCallbackSync((setStateAction: React.SetStateAction<A>) =>
         Effect.andThen(
@@ -31,17 +29,14 @@ export const useSubscriptionRefState: {
 export const useSubscriptionRefFromState: {
     <A>(state: readonly [A, React.Dispatch<React.SetStateAction<A>>]): Effect.Effect<SubscriptionRef.SubscriptionRef<A>, never, Scope.Scope>
 } = Effect.fnUntraced(function*([value, setValue]) {
-    const ref = yield* Component.useOnChange(() => Effect.tap(
+    const ref = yield* Component.useOnMount(() => SubscriptionRef.make(value))
-        SubscriptionRef.make(value),
+
-        ref => Effect.forkScoped(
+    yield* Component.useOnChange(() => Effect.forkScoped(Stream.runForEach(
-            Stream.runForEach(
         Stream.changesWith(ref.changes, Equivalence.strict()),
         v => Effect.sync(() => setValue(v)),
-            )
+    )), [setValue])
-        ),
-    ), [setValue])
-
     yield* Component.useReactEffect(() => Ref.set(ref, value), [value])
+
     return ref
 })
 

packages/effect-fc/src/index.ts

@@ -1,11 +1,11 @@
 export * as Async from "./Async.js"
 export * as Component from "./Component.js"
 export * as Form from "./Form.js"
+export * as Hooks from "./Hooks/index.js"
 export * as Memoized from "./Memoized.js"
 export * as PropertyPath from "./PropertyPath.js"
 export * as ReactRuntime from "./ReactRuntime.js"
 export * as SetStateAction from "./SetStateAction.js"
-export * as Stream from "./Stream.js"
 export * as Subscribable from "./Subscribable.js"
 export * as SubscriptionRef from "./SubscriptionRef.js"
 export * as SubscriptionSubRef from "./SubscriptionSubRef.js"

packages/example/src/lib/form/TextFieldFormInput.tsx

@@ -1,6 +1,6 @@
 import { Callout, Flex, Spinner, Switch, TextField } from "@radix-ui/themes"
 import { Array, Option, Struct } from "effect"
-import { Component, Form, Subscribable } from "effect-fc"
+import { Component, Form, Hooks } from "effect-fc"
 
 
 interface Props
@@ -18,7 +18,8 @@ extends Omit<TextField.RootProps, "optional" | "defaultValue">, Form.useOptional
 export type TextFieldFormInputProps = Props | OptionalProps
 
 
-export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(function*(props: TextFieldFormInputProps) {
+export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(
+    function*(props: TextFieldFormInputProps) {
         const input: (
             | { readonly optional: true } & Form.useOptionalInput.Result<string>
             | { readonly optional: false } & Form.useInput.Result<string>
@@ -28,7 +29,7 @@ export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInp
             // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
             : { optional: false, ...yield* Form.useInput(props.field, props) }
 
-    const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables(
+        const [issues, isValidating, isSubmitting] = yield* Hooks.useSubscribables(
             props.field.issuesSubscribable,
             props.field.isValidatingSubscribable,
             props.field.isSubmittingSubscribable,
@@ -72,4 +73,5 @@ export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInp
                 })}
             </Flex>
         )
-}) {}
+    }
+) {}

packages/example/src/routeTree.gen.ts

@@ -13,7 +13,6 @@ import { Route as FormRouteImport } from './routes/form'
 import { Route as BlankRouteImport } from './routes/blank'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as DevMemoRouteImport } from './routes/dev/memo'
-import { Route as DevContextRouteImport } from './routes/dev/context'
 import { Route as DevAsyncRenderingRouteImport } from './routes/dev/async-rendering'
 
 const FormRoute = FormRouteImport.update({
@@ -36,11 +35,6 @@ const DevMemoRoute = DevMemoRouteImport.update({
   path: '/dev/memo',
   getParentRoute: () => rootRouteImport,
 } as any)
-const DevContextRoute = DevContextRouteImport.update({
-  id: '/dev/context',
-  path: '/dev/context',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const DevAsyncRenderingRoute = DevAsyncRenderingRouteImport.update({
   id: '/dev/async-rendering',
   path: '/dev/async-rendering',
@@ -52,7 +46,6 @@ export interface FileRoutesByFullPath {
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
   '/dev/async-rendering': typeof DevAsyncRenderingRoute
-  '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
 }
 export interface FileRoutesByTo {
@@ -60,7 +53,6 @@ export interface FileRoutesByTo {
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
   '/dev/async-rendering': typeof DevAsyncRenderingRoute
-  '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
 }
 export interface FileRoutesById {
@@ -69,33 +61,19 @@ export interface FileRoutesById {
   '/blank': typeof BlankRoute
   '/form': typeof FormRoute
   '/dev/async-rendering': typeof DevAsyncRenderingRoute
-  '/dev/context': typeof DevContextRoute
   '/dev/memo': typeof DevMemoRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths:
+  fullPaths: '/' | '/blank' | '/form' | '/dev/async-rendering' | '/dev/memo'
-    | '/'
-    | '/blank'
-    | '/form'
-    | '/dev/async-rendering'
-    | '/dev/context'
-    | '/dev/memo'
   fileRoutesByTo: FileRoutesByTo
-  to:
+  to: '/' | '/blank' | '/form' | '/dev/async-rendering' | '/dev/memo'
-    | '/'
-    | '/blank'
-    | '/form'
-    | '/dev/async-rendering'
-    | '/dev/context'
-    | '/dev/memo'
   id:
     | '__root__'
     | '/'
     | '/blank'
     | '/form'
     | '/dev/async-rendering'
-    | '/dev/context'
     | '/dev/memo'
   fileRoutesById: FileRoutesById
 }
@@ -104,7 +82,6 @@ export interface RootRouteChildren {
   BlankRoute: typeof BlankRoute
   FormRoute: typeof FormRoute
   DevAsyncRenderingRoute: typeof DevAsyncRenderingRoute
-  DevContextRoute: typeof DevContextRoute
   DevMemoRoute: typeof DevMemoRoute
 }
 
@@ -138,13 +115,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DevMemoRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/dev/context': {
-      id: '/dev/context'
-      path: '/dev/context'
-      fullPath: '/dev/context'
-      preLoaderRoute: typeof DevContextRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/dev/async-rendering': {
       id: '/dev/async-rendering'
       path: '/dev/async-rendering'
@@ -160,7 +130,6 @@ const rootRouteChildren: RootRouteChildren = {
   BlankRoute: BlankRoute,
   FormRoute: FormRoute,
   DevAsyncRenderingRoute: DevAsyncRenderingRoute,
-  DevContextRoute: DevContextRoute,
   DevMemoRoute: DevMemoRoute,
 }
 export const routeTree = rootRouteImport

packages/example/src/routes/dev/context.tsx

@@ -1,42 +0,0 @@
-import { Container, Flex, Text, TextField } from "@radix-ui/themes"
-import { createFileRoute } from "@tanstack/react-router"
-import { Console, Effect } from "effect"
-import { Component } from "effect-fc"
-import * as React from "react"
-import { runtime } from "@/runtime"
-
-
-class SubService extends Effect.Service<SubService>()("SubService", {
-    effect: (value: string) => Effect.succeed({ value })
-}) {}
-
-const SubComponent = Component.makeUntraced("SubComponent")(function*() {
-    const service = yield* SubService
-    yield* Component.useOnMount(() => Effect.gen(function*() {
-        yield* Effect.addFinalizer(() => Console.log("SubComponent unmounted"))
-        yield* Console.log("SubComponent mounted")
-    }))
-
-    return <Text>{service.value}</Text>
-})
-
-const ContextView = Component.makeUntraced("ContextView")(function*() {
-    const [serviceValue, setServiceValue] = React.useState("test")
-    const SubServiceLayer = React.useMemo(() => SubService.Default(serviceValue), [serviceValue])
-    const SubComponentFC = yield* Effect.provide(SubComponent, yield* Component.useContext(SubServiceLayer))
-
-    return (
-        <Container>
-            <Flex direction="column" align="center">
-                <TextField.Root value={serviceValue} onChange={e => setServiceValue(e.target.value)} />
-                <SubComponentFC />
-            </Flex>
-        </Container>
-    )
-}).pipe(
-    Component.withRuntime(runtime.context)
-)
-
-export const Route = createFileRoute("/dev/context")({
-    component: ContextView
-})

packages/example/src/todo/Todo.tsx

@@ -41,7 +41,7 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
         completedAtField,
     ] = yield* Component.useOnChange(() => Effect.gen(function*() {
         const indexRef = Match.value(props).pipe(
-            Match.tag("new", () => Subscribable.make({ get: Effect.succeed(-1), changes: Stream.make(-1) })),
+            Match.tag("new", () => Subscribable.make({ get: Effect.succeed(-1), changes: Stream.empty })),
             Match.tag("edit", ({ id }) => state.getIndexSubscribable(id)),
             Match.exhaustive,
         )
@@ -78,11 +78,7 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
         ] as const
     }), [props._tag, props._tag === "edit" ? props.id : undefined])
 
-    const [index, size, canSubmit] = yield* Subscribable.useSubscribables(
+    const [index, size, canSubmit] = yield* Subscribable.useSubscribables(indexRef, state.sizeSubscribable, form.canSubmitSubscribable)
-        indexRef,
-        state.sizeSubscribable,
-        form.canSubmitSubscribable,
-    )
     const submit = yield* Form.useSubmit(form)
     const TextFieldFormInputFC = yield* TextFieldFormInput