Update dependency @effect/language-service to ^0.48.0

Version bump
Fix
2025-10-24 01:28:04 +02:00 · 2025-10-24 01:27:36 +02:00 · 2025-10-24 01:26:01 +02:00 · 2025-10-24 00:48:21 +02:00 · 2025-10-24 00:00:14 +02:00 · 2025-10-23 23:50:30 +02:00
36 changed files with 306 additions and 728 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -5,7 +5,7 @@
      "name": "@effect-fc/monorepo",
      "devDependencies": {
        "@biomejs/biome": "^2.2.5",
-        "@effect/language-service": "^0.46.0",
+        "@effect/language-service": "^0.48.0",
        "@types/bun": "^1.2.23",
        "npm-check-updates": "^19.0.0",
        "npm-sort": "^0.0.4",
@@ -135,7 +135,7 @@

    "@effect-fc/example": ["@effect-fc/example@workspace:packages/example"],

-    "@effect/language-service": ["@effect/language-service@0.46.0", "", { "bin": { "effect-language-service": "cli.js" } }, "sha512-eWMuy/RNvDMdhi8NJ/pfHS1UHd5R7adXlO4ClRYMgF6cUqN6FdXw1HgJHF7gJILVPD0Mdo/XQYNJ5gZbsdaImg=="],
+    "@effect/language-service": ["@effect/language-service@0.48.0", "", { "bin": { "effect-language-service": "cli.js" } }, "sha512-u7DTPoGFFeDGSdomjY5C2nCGNWSisxpYSqHp3dlSG8kCZh5cay+166bveHRYvuJSJS5yomdkPTJwjwrqMmT7Og=="],

    "@effect/platform": ["@effect/platform@0.92.1", "", { "dependencies": { "find-my-way-ts": "^0.1.6", "msgpackr": "^1.11.4", "multipasta": "^0.2.7" }, "peerDependencies": { "effect": "^3.18.1" } }, "sha512-XXWCBVwyhaKZISN7aM1fv/3fWDGyxr84ObywnUrL8aHvJLoIeskWFAP/fqw3c5MFCrJ3ZV97RWLbv6JiBQugdg=="],

--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
  },
  "devDependencies": {
    "@biomejs/biome": "^2.2.5",
-    "@effect/language-service": "^0.46.0",
+    "@effect/language-service": "^0.48.0",
    "@types/bun": "^1.2.23",
    "npm-check-updates": "^19.0.0",
    "npm-sort": "^0.0.4",
--- a/packages/effect-fc/package.json
+++ b/packages/effect-fc/package.json
@@ -1,7 +1,7 @@
 {
  "name": "effect-fc",
  "description": "Write React function components with Effect",
-  "version": "0.1.5",
+  "version": "0.2.0",
  "type": "module",
  "files": [
    "./README.md",
--- a/packages/effect-fc/src/Async.ts
+++ b/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 {
--- a/packages/effect-fc/src/Component.ts
+++ b/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, Effect, Effectable, Equivalence, ExecutionStrategy, Exit, Fiber, Function, HashMap, Layer, ManagedRuntime, Option, Predicate, Ref, Runtime, Scope, Tracer, type Types, type Utils } from "effect"
+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 * 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,16 +39,11 @@ 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,
@@ -88,10 +83,10 @@ const ComponentProto = Object.freeze({
    },
 } as const)

-const defaultOptions = {
-    finalizerExecutionMode: "fork",
+const defaultOptions: Component.Options = {
    finalizerExecutionStrategy: ExecutionStrategy.sequential,
-} as const
+    finalizerExecutionDebounce: "100 millis",
+}

 const nonReactiveTags = [Tracer.ParentSpan] as const

@@ -408,7 +403,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<string, ScopeMap.Entry>()))
+    effect: Effect.bind(Effect.Do, "ref", () => Ref.make(HashMap.empty<object, ScopeMap.Entry>()))
 }) {}

 export namespace ScopeMap {
@@ -419,35 +414,44 @@ export namespace ScopeMap {
 }


+export namespace useScope {
+    export interface Options {
+        readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
+        readonly finalizerExecutionDebounce?: Duration.DurationInput
+    }
+}
+
 export const useScope: {
    (
        deps: React.DependencyList,
-        options?: ScopeOptions,
+        options?: useScope.Options,
    ): 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 scope = React.useMemo(() => Runtime.runSync(runtimeRef.current)(Effect.andThen(
-        scopeMap.ref,
-        map => Option.match(HashMap.get(map, key), {
-            onSome: entry => Effect.succeed(entry.scope),
-            onNone: () => Effect.tap(
-                Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential),
-                scope => Ref.update(scopeMap.ref, HashMap.set(key, {
-                    scope,
-                    closeFiber: Option.none(),
-                }))
-            ),
-        }),
+    const [key, scope] = React.useMemo(() => Runtime.runSync(runtimeRef.current)(Effect.andThen(
+        Effect.all([Effect.succeed({}), scopeMap.ref]),
+        ([key, map]) => Effect.andThen(
+            Option.match(HashMap.get(map, key), {
+                onSome: entry => Effect.succeed(entry.scope),
+                onNone: () => Effect.tap(
+                    Scope.make(options?.finalizerExecutionStrategy ?? defaultOptions.finalizerExecutionStrategy),
+                    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 "scope"
+    // biome-ignore lint/correctness/useExhaustiveDependencies: only reactive on "key"
    React.useEffect(() => Runtime.runSync(runtimeRef.current)(scopeMap.ref.pipe(
        Effect.andThen(HashMap.get(key)),
        Effect.tap(entry => Option.match(entry.closeFiber, {
@@ -459,7 +463,7 @@ export const useScope: {
        })),
        Effect.map(({ scope }) =>
            () => Runtime.runSync(runtimeRef.current)(Effect.andThen(
-                Effect.forkDaemon(Effect.sleep("100 millis").pipe(
+                Effect.forkDaemon(Effect.sleep(options?.finalizerExecutionDebounce ?? defaultOptions.finalizerExecutionDebounce).pipe(
                    Effect.andThen(Scope.close(scope, Exit.void)),
                    Effect.andThen(Ref.update(scopeMap.ref, HashMap.remove(key))),
                )),
@@ -469,26 +473,11 @@ export const useScope: {
                })),
            ))
        ),
-    )), [scope])
+    )), [key])

    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>
@@ -500,66 +489,93 @@ 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,
-    ): Effect.Effect<A, E, R>
+        options?: useOnChange.Options,
+    ): 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<R>()
-    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
-    return yield* React.useMemo(() => Runtime.runSync(runtime)(Effect.cached(f())), deps)
+    const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+    const scope = yield* useScope(deps, options)
+
+    // 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?: ScopeOptions,
+        options?: useReactEffect.Options,
    ): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
 } = Effect.fnUntraced(function* <E, R>(
    f: () => Effect.Effect<void, E, R>,
    deps?: React.DependencyList,
-    options?: ScopeOptions,
+    options?: useReactEffect.Options,
 ) {
    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(f(), Scope.Scope, scope))),
-        Effect.map(({ scope }) =>
-            () => closeScope(scope, runtime, options)
-        ),
-        Runtime.runSync(runtime),
    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
-    ), deps)
+    React.useEffect(() => runReactEffect(runtime, f, options), deps)
 })

+const runReactEffect = <E, R>(
+    runtime: Runtime.Runtime<Exclude<R, Scope.Scope>>,
+    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 }) =>
+        () => {
+            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),
+)
+
+export namespace useReactLayoutEffect {
+    export type Options = useReactEffect.Options
+}
+
 export const useReactLayoutEffect: {
    <E, R>(
        f: () => Effect.Effect<void, E, R>,
        deps?: React.DependencyList,
-        options?: ScopeOptions,
+        options?: useReactLayoutEffect.Options,
    ): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
 } = Effect.fnUntraced(function* <E, R>(
    f: () => Effect.Effect<void, E, R>,
    deps?: React.DependencyList,
-    options?: ScopeOptions,
+    options?: useReactLayoutEffect.Options,
 ) {
    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
-    ), deps)
+    React.useLayoutEffect(() => runReactEffect(runtime, f, options), deps)
 })

 export const useCallbackSync: {
@@ -596,14 +612,18 @@ 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?: ScopeOptions,
+        options?: useContext.Options,
    ): Effect.Effect<Context.Context<ROut>, E, RIn>
 } = Effect.fnUntraced(function* <ROut, E, RIn>(
    layer: Layer.Layer<ROut, E, RIn>,
-    options?: ScopeOptions,
+    options?: useContext.Options,
 ) {
    const scope = yield* useScope([layer], options)

--- a/packages/effect-fc/src/Form.ts
+++ b/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>
--- a/packages/effect-fc/src/Hooks/ScopeOptions.ts
+++ b/packages/effect-fc/src/Hooks/ScopeOptions.ts
@@ -1,7 +0,0 @@
-import type { ExecutionStrategy } from "effect"
-
-
-export interface ScopeOptions {
-    readonly finalizerExecutionMode?: "sync" | "fork"
-    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
-}
--- a/packages/effect-fc/src/Hooks/index.ts
+++ b/packages/effect-fc/src/Hooks/index.ts
@@ -1,16 +0,0 @@
-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"
--- a/packages/effect-fc/src/Hooks/input/index.ts
+++ b/packages/effect-fc/src/Hooks/input/index.ts
@@ -1,2 +0,0 @@
-export * from "./useInput.js"
-export * from "./useOptionalInput.js"
--- a/packages/effect-fc/src/Hooks/input/useInput.ts
+++ b/packages/effect-fc/src/Hooks/input/useInput.ts
@@ -1,67 +0,0 @@
-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 }
-})
--- a/packages/effect-fc/src/Hooks/input/useOptionalInput.ts
+++ b/packages/effect-fc/src/Hooks/input/useOptionalInput.ts
@@ -1,107 +0,0 @@
-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 }
-})
--- a/packages/effect-fc/src/Hooks/internal.ts
+++ b/packages/effect-fc/src/Hooks/internal.ts
@@ -1,18 +0,0 @@
-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
-    }
-}
--- a/packages/effect-fc/src/Hooks/useCallbackPromise.ts
+++ b/packages/effect-fc/src/Hooks/useCallbackPromise.ts
@@ -1,20 +0,0 @@
-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)
-})
--- a/packages/effect-fc/src/Hooks/useCallbackSync.ts
+++ b/packages/effect-fc/src/Hooks/useCallbackSync.ts
@@ -1,20 +0,0 @@
-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)
-})
--- a/packages/effect-fc/src/Hooks/useContext.ts
+++ b/packages/effect-fc/src/Hooks/useContext.ts
@@ -1,25 +0,0 @@
-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])
-})
--- a/packages/effect-fc/src/Hooks/useEffect.ts
+++ b/packages/effect-fc/src/Hooks/useEffect.ts
@@ -1,29 +0,0 @@
-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)
-})
--- a/packages/effect-fc/src/Hooks/useFork.ts
+++ b/packages/effect-fc/src/Hooks/useFork.ts
@@ -1,32 +0,0 @@
-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)
-})
--- a/packages/effect-fc/src/Hooks/useLayoutEffect.ts
+++ b/packages/effect-fc/src/Hooks/useLayoutEffect.ts
@@ -1,29 +0,0 @@
-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)
-})
--- a/packages/effect-fc/src/Hooks/useMemo.ts
+++ b/packages/effect-fc/src/Hooks/useMemo.ts
@@ -1,17 +0,0 @@
-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)
-})
--- a/packages/effect-fc/src/Hooks/useOnce.ts
+++ b/packages/effect-fc/src/Hooks/useOnce.ts
@@ -1,11 +0,0 @@
-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, [])
-})
--- a/packages/effect-fc/src/Hooks/useRefFromState.ts
+++ b/packages/effect-fc/src/Hooks/useRefFromState.ts
@@ -1,20 +0,0 @@
-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
-})
--- a/packages/effect-fc/src/Hooks/useRefState.ts
+++ b/packages/effect-fc/src/Hooks/useRefState.ts
@@ -1,29 +0,0 @@
-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]
-})
--- a/packages/effect-fc/src/Hooks/useScope.ts
+++ b/packages/effect-fc/src/Hooks/useScope.ts
@@ -1,38 +0,0 @@
-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
-})
--- a/packages/effect-fc/src/Hooks/useStreamFromReactiveValues.ts
+++ b/packages/effect-fc/src/Hooks/useStreamFromReactiveValues.ts
@@ -1,30 +0,0 @@
-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
-})
--- a/packages/effect-fc/src/Hooks/useSubscribables.ts
+++ b/packages/effect-fc/src/Hooks/useSubscribables.ts
@@ -1,31 +0,0 @@
-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
-})
--- a/packages/effect-fc/src/Hooks/useSubscribeStream.ts
+++ b/packages/effect-fc/src/Hooks/useSubscribeStream.ts
@@ -1,32 +0,0 @@
-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>
-})
--- a/packages/effect-fc/src/Memoized.ts
+++ b/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> {
--- a/packages/effect-fc/src/ReactRuntime.ts
+++ b/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> {
--- a/packages/effect-fc/src/Stream.ts
+++ b/packages/effect-fc/src/Stream.ts
@@ -0,0 +1,58 @@
+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"
--- a/packages/effect-fc/src/Subscribable.ts
+++ b/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.useOnChange(() => Effect.forkScoped(pipe(
+    yield* Component.useReactEffect(() => Effect.forkScoped(pipe(
        elements.map(ref => Stream.changesWith(ref.changes, Equivalence.strict())),
        streams => Stream.zipLatestAll(...streams),
        Stream.runForEach(v =>
--- a/packages/effect-fc/src/SubscriptionRef.ts
+++ b/packages/effect-fc/src/SubscriptionRef.ts
@@ -11,10 +11,12 @@ export const useSubscriptionRefState: {
 } = Effect.fnUntraced(function* <A>(ref: SubscriptionRef.SubscriptionRef<A>) {
    const [reactStateValue, setReactStateValue] = React.useState(yield* Component.useOnMount(() => ref))

-    yield* Component.useOnChange(() => Effect.forkScoped(Stream.runForEach(
-        Stream.changesWith(ref.changes, Equivalence.strict()),
-        v => Effect.sync(() => setReactStateValue(v)),
-    )), [ref])
+    yield* Component.useReactEffect(() => Effect.forkScoped(
+        Stream.runForEach(
+            Stream.changesWith(ref.changes, Equivalence.strict()),
+            v => Effect.sync(() => setReactStateValue(v)),
+        )
+    ), [ref])

    const setValue = yield* Component.useCallbackSync((setStateAction: React.SetStateAction<A>) =>
        Effect.andThen(
@@ -29,14 +31,17 @@ 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.useOnMount(() => SubscriptionRef.make(value))
+    const ref = yield* Component.useOnChange(() => Effect.tap(
+        SubscriptionRef.make(value),
+        ref => Effect.forkScoped(
+            Stream.runForEach(
+                Stream.changesWith(ref.changes, Equivalence.strict()),
+                v => Effect.sync(() => setValue(v)),
+            )
+        ),
+    ), [setValue])

-    yield* Component.useOnChange(() => Effect.forkScoped(Stream.runForEach(
-        Stream.changesWith(ref.changes, Equivalence.strict()),
-        v => Effect.sync(() => setValue(v)),
-    )), [setValue])
    yield* Component.useReactEffect(() => Ref.set(ref, value), [value])
-
    return ref
 })

--- a/packages/effect-fc/src/index.ts
+++ b/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"
--- a/packages/example/src/lib/form/TextFieldFormInput.tsx
+++ b/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, Hooks } from "effect-fc"
+import { Component, Form, Subscribable } from "effect-fc"


 interface Props
@@ -18,60 +18,58 @@ extends Omit<TextField.RootProps, "optional" | "defaultValue">, Form.useOptional
 export type TextFieldFormInputProps = Props | OptionalProps


-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>
-        ) = props.optional
-            // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
-            ? { optional: true, ...yield* Form.useOptionalInput(props.field, props) }
-            // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
-            : { optional: false, ...yield* Form.useInput(props.field, props) }
+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>
+    ) = props.optional
+        // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
+        ? { optional: true, ...yield* Form.useOptionalInput(props.field, props) }
+        // biome-ignore lint/correctness/useHookAtTopLevel: "optional" reactivity not supported
+        : { optional: false, ...yield* Form.useInput(props.field, props) }

-        const [issues, isValidating, isSubmitting] = yield* Hooks.useSubscribables(
-            props.field.issuesSubscribable,
-            props.field.isValidatingSubscribable,
-            props.field.isSubmittingSubscribable,
-        )
+    const [issues, isValidating, isSubmitting] = yield* Subscribable.useSubscribables(
+        props.field.issuesSubscribable,
+        props.field.isValidatingSubscribable,
+        props.field.isSubmittingSubscribable,
+    )

-        return (
-            <Flex direction="column" gap="1">
-                <TextField.Root
-                    value={input.value}
-                    onChange={e => input.setValue(e.target.value)}
-                    disabled={(input.optional && !input.enabled) || isSubmitting}
-                    {...Struct.omit(props, "optional", "defaultValue")}
-                >
-                    {input.optional &&
-                        <TextField.Slot side="left">
-                            <Switch
-                                size="1"
-                                checked={input.enabled}
-                                onCheckedChange={input.setEnabled}
-                            />
-                        </TextField.Slot>
-                    }
+    return (
+        <Flex direction="column" gap="1">
+            <TextField.Root
+                value={input.value}
+                onChange={e => input.setValue(e.target.value)}
+                disabled={(input.optional && !input.enabled) || isSubmitting}
+                {...Struct.omit(props, "optional", "defaultValue")}
+            >
+                {input.optional &&
+                    <TextField.Slot side="left">
+                        <Switch
+                            size="1"
+                            checked={input.enabled}
+                            onCheckedChange={input.setEnabled}
+                        />
+                    </TextField.Slot>
+                }

-                    {isValidating &&
-                        <TextField.Slot side="right">
-                            <Spinner />
-                        </TextField.Slot>
-                    }
+                {isValidating &&
+                    <TextField.Slot side="right">
+                        <Spinner />
+                    </TextField.Slot>
+                }

-                    {props.children}
-                </TextField.Root>
+                {props.children}
+            </TextField.Root>

-                {Option.match(Array.head(issues), {
-                    onSome: issue => (
-                        <Callout.Root>
-                            <Callout.Text>{issue.message}</Callout.Text>
-                        </Callout.Root>
-                    ),
+            {Option.match(Array.head(issues), {
+                onSome: issue => (
+                    <Callout.Root>
+                        <Callout.Text>{issue.message}</Callout.Text>
+                    </Callout.Root>
+                ),

-                    onNone: () => <></>,
-                })}
-            </Flex>
-        )
-    }
-) {}
+                onNone: () => <></>,
+            })}
+        </Flex>
+    )
+}) {}
--- a/packages/example/src/routeTree.gen.ts
+++ b/packages/example/src/routeTree.gen.ts
@@ -13,6 +13,7 @@ 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({
@@ -35,6 +36,11 @@ 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',
@@ -46,6 +52,7 @@ 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 {
@@ -53,6 +60,7 @@ 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 {
@@ -61,19 +69,33 @@ 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: '/' | '/blank' | '/form' | '/dev/async-rendering' | '/dev/memo'
+  fullPaths:
+    | '/'
+    | '/blank'
+    | '/form'
+    | '/dev/async-rendering'
+    | '/dev/context'
+    | '/dev/memo'
  fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/blank' | '/form' | '/dev/async-rendering' | '/dev/memo'
+  to:
+    | '/'
+    | '/blank'
+    | '/form'
+    | '/dev/async-rendering'
+    | '/dev/context'
+    | '/dev/memo'
  id:
    | '__root__'
    | '/'
    | '/blank'
    | '/form'
    | '/dev/async-rendering'
+    | '/dev/context'
    | '/dev/memo'
  fileRoutesById: FileRoutesById
 }
@@ -82,6 +104,7 @@ export interface RootRouteChildren {
  BlankRoute: typeof BlankRoute
  FormRoute: typeof FormRoute
  DevAsyncRenderingRoute: typeof DevAsyncRenderingRoute
+  DevContextRoute: typeof DevContextRoute
  DevMemoRoute: typeof DevMemoRoute
 }

@@ -115,6 +138,13 @@ 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'
@@ -130,6 +160,7 @@ const rootRouteChildren: RootRouteChildren = {
  BlankRoute: BlankRoute,
  FormRoute: FormRoute,
  DevAsyncRenderingRoute: DevAsyncRenderingRoute,
+  DevContextRoute: DevContextRoute,
  DevMemoRoute: DevMemoRoute,
 }
 export const routeTree = rootRouteImport
--- a/packages/example/src/routes/dev/context.tsx
+++ b/packages/example/src/routes/dev/context.tsx
@@ -0,0 +1,42 @@
+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
+})
--- a/packages/example/src/todo/Todo.tsx
+++ b/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.empty })),
+            Match.tag("new", () => Subscribable.make({ get: Effect.succeed(-1), changes: Stream.make(-1) })),
            Match.tag("edit", ({ id }) => state.getIndexSubscribable(id)),
            Match.exhaustive,
        )
@@ -78,7 +78,11 @@ 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(indexRef, state.sizeSubscribable, form.canSubmitSubscribable)
+    const [index, size, canSubmit] = yield* Subscribable.useSubscribables(
+        indexRef,
+        state.sizeSubscribable,
+        form.canSubmitSubscribable,
+    )
    const submit = yield* Form.useSubmit(form)
    const TextFieldFormInputFC = yield* TextFieldFormInput
Author	SHA1	Message	Date
Renovate Bot	b9e0718599	Update dependency @effect/language-service to ^0.48.0 All checks were successful Lint / lint (push) Successful in 12s Details Test build / test-build (pull_request) Successful in 18s Details	2025-10-24 01:28:04 +02:00
Julien Valverdé	cd8b5e6364	Version bump All checks were successful Lint / lint (push) Successful in 12s Details	2025-10-24 01:27:36 +02:00
Julien Valverdé	a48b623822	Fix All checks were successful Lint / lint (push) Successful in 12s Details	2025-10-24 01:26:01 +02:00
Julien Valverdé	499e1e174b	Fix All checks were successful Lint / lint (push) Successful in 12s Details	2025-10-24 00:48:21 +02:00
Julien Valverdé	6b9c177ae7	Fix All checks were successful Lint / lint (push) Successful in 11s Details	2025-10-24 00:00:14 +02:00
Julien Valverdé	b73b053cc8	Fix All checks were successful Lint / lint (push) Successful in 12s Details	2025-10-23 23:50:30 +02:00
Julien Valverdé	bbad86bf97	Cleanup All checks were successful Lint / lint (push) Successful in 12s Details	2025-10-23 23:36:30 +02:00
Julien Valverdé	6ae311cdfd	Refactor All checks were successful Lint / lint (push) Successful in 12s Details	2025-10-23 23:01:27 +02:00
Julien Valverdé	03eca8a1af	Fix useOnChange All checks were successful Lint / lint (push) Successful in 12s Details	2025-10-23 16:36:53 +02:00
Julien Valverdé	c03d697361	Fix All checks were successful Lint / lint (push) Successful in 13s Details	2025-10-23 16:20:30 +02:00
Julien Valverdé	3847686d54	Add Stream module All checks were successful Lint / lint (push) Successful in 12s Details	2025-10-23 16:08:25 +02:00
Julien Valverdé	9801444c0a	Fix Component All checks were successful Lint / lint (push) Successful in 12s Details	2025-10-23 15:42:19 +02:00
Julien Valverdé	68d8c9fa84	Refactor Component All checks were successful Lint / lint (push) Successful in 12s Details	2025-10-23 15:19:47 +02:00
Julien Valverdé	cba42bfa52	Fix useScope All checks were successful Lint / lint (push) Successful in 17s Details	2025-10-23 14:31:51 +02:00