0.2.0 (#18)

Co-authored-by: Renovate Bot <renovate-bot@valverde.cloud>
Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: #18

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",

packages/effect-fc/src/Async.ts

@@ -1,10 +1,10 @@
 /** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
 import { Effect, Function, Predicate, Runtime, Scope } from "effect"
 import * as React from "react"
-import type * as Component from "./Component.js"
+import * as Component from "./Component.js"
 
 
-export const TypeId: unique symbol = Symbol.for("effect-fc/Async")
+export const TypeId: unique symbol = Symbol.for("@effect-fc/Async/Async")
 export type TypeId = typeof TypeId
 
 export interface Async extends Async.Options {
@@ -26,13 +26,15 @@ const SuspenseProto = Object.freeze({
     makeFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
         this: Component.Component<P, A, E, R> & Async,
         runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
-        scope: Scope.Scope,
     ) {
         const SuspenseInner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)
 
         return ({ fallback, name, ...props }: Async.Props) => {
             const promise = Runtime.runPromise(runtimeRef.current)(
-                Effect.provideService(this.body(props as P), Scope.Scope, scope)
+                Effect.andThen(
+                    Component.useScope([], this),
+                    scope => Effect.provideService(this.body(props as P), Scope.Scope, scope),
+                )
             )
 
             return React.createElement(

packages/effect-fc/src/Component.ts

@@ -1,12 +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, ExecutionStrategy, Function, Predicate, 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 * as Hooks from "./Hooks/index.js"
 import { Memoized } from "./index.js"
 
 
-export const TypeId: unique symbol = Symbol.for("effect-fc/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>
@@ -26,8 +25,7 @@ extends
 
     /** @internal */
     makeFunctionComponent(
-        runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
-        scope: Scope.Scope,
+        runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>
     ): (props: P) => A
 }
 
@@ -41,8 +39,8 @@ export namespace Component {
 
     export interface Options {
         readonly displayName?: string
-        readonly finalizerExecutionMode: "sync" | "fork"
         readonly finalizerExecutionStrategy: ExecutionStrategy.ExecutionStrategy
+        readonly finalizerExecutionDebounce: Duration.DurationInput
     }
 }
 
@@ -54,46 +52,41 @@ const ComponentProto = Object.freeze({
     commit: Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode, E, R>(
         this: Component<P, A, E, R>
     ) {
-        const self = this
         // biome-ignore lint/style/noNonNullAssertion: React ref initialization
         const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
         runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
 
-        return React.useRef(function ScopeProvider(props: P) {
-            const scope = Runtime.runSync(runtimeRef.current)(Hooks.useScope(
-                Array.from(
-                    Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
-                ),
-                self,
-            ))
-
-            const FC = React.useMemo(() => {
-                const f: React.FC<P> = self.makeFunctionComponent(runtimeRef, scope)
-                f.displayName = self.displayName ?? "Anonymous"
-                return Memoized.isMemoized(self)
-                    ? React.memo(f, self.propsAreEqual)
+        return yield* React.useState(() => Runtime.runSync(runtimeRef.current)(Effect.cachedFunction(
+            (_services: readonly any[]) => Effect.sync(() => {
+                const f: React.FC<P> = this.makeFunctionComponent(runtimeRef)
+                f.displayName = this.displayName ?? "Anonymous"
+                return Memoized.isMemoized(this)
+                    ? React.memo(f, this.propsAreEqual)
                     : f
-            }, [scope])
-
-            return React.createElement(FC, props)
-        }).current
+            }),
+            Equivalence.array(Equivalence.strict()),
+        )))[0](Array.from(
+            Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
+        ))
     }),
 
     makeFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
         this: Component<P, A, E, R>,
         runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
-        scope: Scope.Scope,
     ) {
         return (props: P) => Runtime.runSync(runtimeRef.current)(
-            Effect.provideService(this.body(props), Scope.Scope, scope)
+            Effect.andThen(
+                useScope([], this),
+                scope => Effect.provideService(this.body(props), Scope.Scope, scope),
+            )
         )
     },
 } as const)
 
-const defaultOptions = {
-    finalizerExecutionMode: "sync",
+const defaultOptions: Component.Options = {
     finalizerExecutionStrategy: ExecutionStrategy.sequential,
-} as const
+    finalizerExecutionDebounce: "100 millis",
+}
 
 const nonReactiveTags = [Tracer.ParentSpan] as const
 
@@ -407,3 +400,238 @@ export const withRuntime: {
         props,
     )
 })
+
+
+export class ScopeMap extends Effect.Service<ScopeMap>()("effect-fc/Component/ScopeMap", {
+    effect: Effect.bind(Effect.Do, "ref", () => Ref.make(HashMap.empty<object, ScopeMap.Entry>()))
+}) {}
+
+export namespace ScopeMap {
+    export interface Entry {
+        readonly scope: Scope.CloseableScope
+        readonly closeFiber: Option.Option<Fiber.RuntimeFiber<void>>
+    }
+}
+
+
+export namespace useScope {
+    export interface Options {
+        readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
+        readonly finalizerExecutionDebounce?: Duration.DurationInput
+    }
+}
+
+export const useScope: {
+    (
+        deps: React.DependencyList,
+        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 scopeMap = yield* ScopeMap as unknown as Effect.Effect<ScopeMap>
+
+    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 "key"
+    React.useEffect(() => Runtime.runSync(runtimeRef.current)(scopeMap.ref.pipe(
+        Effect.andThen(HashMap.get(key)),
+        Effect.tap(entry => Option.match(entry.closeFiber, {
+            onSome: fiber => Effect.andThen(
+                Ref.update(scopeMap.ref, HashMap.set(key, { ...entry, closeFiber: Option.none() })),
+                Fiber.interruptFork(fiber),
+            ),
+            onNone: () => Effect.void,
+        })),
+        Effect.map(({ scope }) =>
+            () => Runtime.runSync(runtimeRef.current)(Effect.andThen(
+                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))),
+                )),
+                fiber => Ref.update(scopeMap.ref, HashMap.set(key, {
+                    scope,
+                    closeFiber: Option.some(fiber),
+                })),
+            ))
+        ),
+    )), [key])
+
+    return scope
+})
+
+export const useOnMount: {
+    <A, E, R>(
+        f: () => Effect.Effect<A, E, R>
+    ): Effect.Effect<A, E, R>
+} = Effect.fnUntraced(function* <A, E, R>(
+    f: () => Effect.Effect<A, E, R>
+) {
+    const runtime = yield* Effect.runtime<R>()
+    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, 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 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?: 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?: useReactEffect.Options,
+) {
+    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>(
+    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?: 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?: useReactLayoutEffect.Options,
+) {
+    const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+    // biome-ignore lint/correctness/useExhaustiveDependencies: use of React.DependencyList
+    React.useLayoutEffect(() => runReactEffect(runtime, f, options), deps)
+})
+
+export const useCallbackSync: {
+    <Args extends unknown[], A, E, R>(
+        f: (...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>(
+    f: (...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)(f(...args)), deps)
+})
+
+export const useCallbackPromise: {
+    <Args extends unknown[], A, E, R>(
+        f: (...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>(
+    f: (...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)(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,
+    ): Effect.Effect<Context.Context<ROut>, E, RIn>
+} = Effect.fnUntraced(function* <ROut, E, RIn>(
+    layer: Layer.Layer<ROut, E, RIn>,
+    options?: useContext.Options,
+) {
+    const scope = yield* useScope([layer], options)
+
+    return yield* useOnChange(() => 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/Form.ts

@@ -1,14 +1,15 @@
 import * as AsyncData from "@typed/async-data"
-import { Array, Cause, Chunk, type Duration, Effect, Equal, Exit, Fiber, flow, identity, Option, ParseResult, Pipeable, Predicate, Ref, Schema, type Scope, Stream, SubscriptionRef } from "effect"
+import { Array, Cause, Chunk, type Duration, Effect, Equal, Exit, Fiber, flow, identity, Option, ParseResult, Pipeable, Predicate, Ref, Schema, type Scope, Stream } from "effect"
 import type { NoSuchElementException } from "effect/Cause"
 import * as React from "react"
-import * as Hooks from "./Hooks/index.js"
+import * as Component from "./Component.js"
 import * as PropertyPath from "./PropertyPath.js"
 import * as Subscribable from "./Subscribable.js"
+import * as SubscriptionRef from "./SubscriptionRef.js"
 import * as SubscriptionSubRef from "./SubscriptionSubRef.js"
 
 
-export const FormTypeId: unique symbol = Symbol.for("effect-fc/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>
@@ -17,6 +18,7 @@ extends Pipeable.Pipeable {
 
     readonly schema: Schema.Schema<A, I, R>
     readonly onSubmit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>
+    readonly autosubmit: boolean
     readonly debounce: Option.Option<Duration.DurationInput>
 
     readonly valueRef: SubscriptionRef.SubscriptionRef<Option.Option<A>>
@@ -35,6 +37,7 @@ extends Pipeable.Class() implements Form<A, I, R, SA, SE, SR> {
     constructor(
         readonly schema: Schema.Schema<A, I, R>,
         readonly onSubmit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>,
+        readonly autosubmit: boolean,
         readonly debounce: Option.Option<Duration.DurationInput>,
 
         readonly valueRef: SubscriptionRef.SubscriptionRef<Option.Option<A>>,
@@ -52,11 +55,15 @@ extends Pipeable.Class() implements Form<A, I, R, SA, SE, SR> {
 export const isForm = (u: unknown): u is Form<unknown, unknown, unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, FormTypeId)
 
 export namespace make {
-    export interface Options<in out A, in out I, out R, in out SA = void, in out SE = A, out SR = never> {
+    export interface Options<in out A, in out I, in out R, in out SA = void, in out SE = A, out SR = never> {
         readonly schema: Schema.Schema<A, I, R>
         readonly initialEncodedValue: NoInfer<I>
-        readonly onSubmit: (value: NoInfer<A>) => Effect.Effect<SA, SE, SR>,
-        readonly debounce?: Duration.DurationInput,
+        readonly onSubmit: (
+            this: Form<NoInfer<A>, NoInfer<I>, NoInfer<R>, unknown, unknown, unknown>,
+            value: NoInfer<A>,
+        ) => Effect.Effect<SA, SE, SR>
+        readonly autosubmit?: boolean
+        readonly debounce?: Duration.DurationInput
     }
 }
 
@@ -75,6 +82,7 @@ export const make: {
     return new FormImpl(
         options.schema,
         options.onSubmit,
+        options.autosubmit ?? false,
         Option.fromNullable(options.debounce),
 
         valueRef,
@@ -97,7 +105,7 @@ export const make: {
 
 export const run = <A, I, R, SA, SE, SR>(
     self: Form<A, I, R, SA, SE, SR>
-): Effect.Effect<void, never, Scope.Scope | R> => Stream.runForEach(
+): Effect.Effect<void, never, Scope.Scope | R | SR> => Stream.runForEach(
     self.encodedValueRef.changes.pipe(
         Option.isSome(self.debounce) ? Stream.debounce(self.debounce.value) : identity
     ),
@@ -108,30 +116,35 @@ export const run = <A, I, R, SA, SE, SR>(
             onNone: () => Effect.void,
         })),
         Effect.andThen(
-            Effect.addFinalizer(() => SubscriptionRef.set(self.validationFiberRef, Option.none())).pipe(
+            Effect.addFinalizer(() => Ref.set(self.validationFiberRef, Option.none())).pipe(
                 Effect.andThen(Schema.decode(self.schema, { errors: "all" })(encodedValue)),
                 Effect.exit,
                 Effect.andThen(flow(
                     Exit.matchEffect({
-                        onSuccess: v => Effect.andThen(
-                            SubscriptionRef.set(self.valueRef, Option.some(v)),
-                            SubscriptionRef.set(self.errorRef, Option.none()),
+                        onSuccess: v => Ref.set(self.valueRef, Option.some(v)).pipe(
+                            Effect.andThen(Ref.set(self.errorRef, Option.none())),
+                            Effect.as(Option.some(v)),
                         ),
-                        onFailure: c => Option.match(
-                            Chunk.findFirst(Cause.failures(c), e => e._tag === "ParseError"),
-                            {
-                                onSome: e => SubscriptionRef.set(self.errorRef, Option.some(e)),
+                        onFailure: c => Chunk.findFirst(Cause.failures(c), e => e._tag === "ParseError").pipe(
+                            Option.match({
+                                onSome: e => Ref.set(self.errorRef, Option.some(e)),
                                 onNone: () => Effect.void,
-                            },
+                            }),
+                            Effect.as(Option.none<A>()),
                         ),
                     }),
                     Effect.uninterruptible,
                 )),
                 Effect.scoped,
+
+                Effect.andThen(value => Option.isSome(value) && self.autosubmit
+                    ? Effect.asVoid(Effect.forkScoped(submit(self)))
+                    : Effect.void
+                ),
                 Effect.forkScoped,
             )
         ),
-        Effect.andThen(fiber => SubscriptionRef.set(self.validationFiberRef, Option.some(fiber)))
+        Effect.andThen(fiber => Ref.set(self.validationFiberRef, Option.some(fiber)))
     ),
 )
 
@@ -157,13 +170,13 @@ export const submit = <A, I, R, SA, SE, SR>(
 )
 
 export namespace service {
-    export interface Options<in out A, in out I, out R, in out SA = void, in out SE = A, out SR = never>
+    export interface Options<in out A, in out I, in out R, in out SA = void, in out SE = A, out SR = never>
     extends make.Options<A, I, R, SA, SE, SR> {}
 }
 
 export const service = <A, I = A, R = never, SA = void, SE = A, SR = never>(
     options: service.Options<A, I, R, SA, SE, SR>
-): Effect.Effect<Form<A, I, R, SA, SE, SR>, never, R | Scope.Scope> => Effect.tap(
+): Effect.Effect<Form<A, I, R, SA, SE, SR>, never, Scope.Scope | R | SR> => Effect.tap(
     make(options),
     form => Effect.forkScoped(run(form)),
 )
@@ -220,24 +233,6 @@ extends Pipeable.Class() implements FormField<A, I> {
 
 export const isFormField = (u: unknown): u is FormField<unknown, unknown> => Predicate.hasProperty(u, FormFieldTypeId)
 
-export namespace useForm {
-    export interface Options<in out A, in out I, out R, in out SA = void, in out SE = A, out SR = never>
-    extends make.Options<A, I, R, SA, SE, SR> {}
-}
-
-export const useForm: {
-    <A, I = A, R = never, SA = void, SE = A, SR = never>(
-        options: make.Options<A, I, R, SA, SE, SR>,
-        deps: React.DependencyList,
-    ): Effect.Effect<Form<A, I, R, SA, SE, SR>, never, R>
-} = Effect.fnUntraced(function* <A, I = A, R = never, SA = void, SE = A, SR = never>(
-    options: make.Options<A, I, R, SA, SE, SR>,
-    deps: React.DependencyList,
-) {
-    const form = yield* Hooks.useMemo(() => make(options), [options.debounce, ...deps])
-    yield* Hooks.useFork(() => run(form), [form])
-    return form
-})
 
 export const useSubmit = <A, I, R, SA, SE, SR>(
     self: Form<A, I, R, SA, SE, SR>
@@ -245,7 +240,7 @@ export const useSubmit = <A, I, R, SA, SE, SR>(
     () => Promise<Option.Option<AsyncData.AsyncData<SA, SE>>>,
     never,
     SR
-> => Hooks.useCallbackPromise(() => submit(self), [self])
+> => Component.useCallbackPromise(() => submit(self), [self])
 
 export const useField = <A, I, R, SA, SE, SR, const P extends PropertyPath.Paths<NoInfer<I>>>(
     self: Form<A, I, R, SA, SE, SR>,
@@ -271,33 +266,34 @@ export const useInput: {
     <A, I>(
         field: FormField<A, I>,
         options?: useInput.Options,
-    ): Effect.Effect<useInput.Result<I>, NoSuchElementException>
+    ): Effect.Effect<useInput.Result<I>, NoSuchElementException, Scope.Scope>
 } = Effect.fnUntraced(function* <A, I>(
     field: FormField<A, I>,
     options?: useInput.Options,
 ) {
-    const internalValueRef = yield* Hooks.useMemo(() => Effect.andThen(field.encodedValueRef, SubscriptionRef.make), [field])
-    const [value, setValue] = yield* Hooks.useRefState(internalValueRef)
-
-    yield* Hooks.useFork(() => Effect.all([
-        Stream.runForEach(
-            Stream.drop(field.encodedValueRef, 1),
-            upstreamEncodedValue => Effect.whenEffect(
-                Ref.set(internalValueRef, upstreamEncodedValue),
-                Effect.andThen(internalValueRef, internalValue => !Equal.equals(upstreamEncodedValue, internalValue)),
+    const internalValueRef = yield* Component.useOnChange(() => Effect.tap(
+        Effect.andThen(field.encodedValueRef, SubscriptionRef.make),
+        internalValueRef => Effect.forkScoped(Effect.all([
+            Stream.runForEach(
+                Stream.drop(field.encodedValueRef, 1),
+                upstreamEncodedValue => Effect.whenEffect(
+                    Ref.set(internalValueRef, upstreamEncodedValue),
+                    Effect.andThen(internalValueRef, internalValue => !Equal.equals(upstreamEncodedValue, internalValue)),
+                ),
             ),
-        ),
 
-        Stream.runForEach(
-            internalValueRef.changes.pipe(
-                Stream.drop(1),
-                Stream.changesWith(Equal.equivalence()),
-                options?.debounce ? Stream.debounce(options.debounce) : identity,
+            Stream.runForEach(
+                internalValueRef.changes.pipe(
+                    Stream.drop(1),
+                    Stream.changesWith(Equal.equivalence()),
+                    options?.debounce ? Stream.debounce(options.debounce) : identity,
+                ),
+                internalValue => Ref.set(field.encodedValueRef, internalValue),
             ),
-            internalValue => Ref.set(field.encodedValueRef, internalValue),
-        ),
-    ], { concurrency: "unbounded" }), [field, internalValueRef, options?.debounce])
+        ], { concurrency: "unbounded" })),
+    ), [field, options?.debounce])
 
+    const [value, setValue] = yield* SubscriptionRef.useSubscriptionRefState(internalValueRef)
     return { value, setValue }
 })
 
@@ -316,55 +312,56 @@ export const useOptionalInput: {
     <A, I>(
         field: FormField<A, Option.Option<I>>,
         options: useOptionalInput.Options<I>,
-    ): Effect.Effect<useOptionalInput.Result<I>, NoSuchElementException>
+    ): Effect.Effect<useOptionalInput.Result<I>, NoSuchElementException, Scope.Scope>
 } = Effect.fnUntraced(function* <A, I>(
     field: FormField<A, Option.Option<I>>,
     options: useOptionalInput.Options<I>,
 ) {
-    const [enabledRef, internalValueRef] = yield* Hooks.useMemo(() => Effect.andThen(
-        field.encodedValueRef,
-        Option.match({
-            onSome: v => Effect.all([SubscriptionRef.make(true), SubscriptionRef.make(v)]),
-            onNone: () => Effect.all([SubscriptionRef.make(false), SubscriptionRef.make(options.defaultValue)]),
-        }),
-    ), [field])
+    const [enabledRef, internalValueRef] = yield* Component.useOnChange(() => Effect.tap(
+        Effect.andThen(
+            field.encodedValueRef,
+            Option.match({
+                onSome: v => Effect.all([SubscriptionRef.make(true), SubscriptionRef.make(v)]),
+                onNone: () => Effect.all([SubscriptionRef.make(false), SubscriptionRef.make(options.defaultValue)]),
+            }),
+        ),
 
-    const [enabled, setEnabled] = yield* Hooks.useRefState(enabledRef)
-    const [value, setValue] = yield* Hooks.useRefState(internalValueRef)
+        ([enabledRef, internalValueRef]) => Effect.forkScoped(Effect.all([
+            Stream.runForEach(
+                Stream.drop(field.encodedValueRef, 1),
 
-    yield* Hooks.useFork(() => Effect.all([
-        Stream.runForEach(
-            Stream.drop(field.encodedValueRef, 1),
+                upstreamEncodedValue => Effect.whenEffect(
+                    Option.match(upstreamEncodedValue, {
+                        onSome: v => Effect.andThen(
+                            Ref.set(enabledRef, true),
+                            Ref.set(internalValueRef, v),
+                        ),
+                        onNone: () => Effect.andThen(
+                            Ref.set(enabledRef, false),
+                            Ref.set(internalValueRef, options.defaultValue),
+                        ),
+                    }),
 
-            upstreamEncodedValue => Effect.whenEffect(
-                Option.match(upstreamEncodedValue, {
-                    onSome: v => Effect.andThen(
-                        Ref.set(enabledRef, true),
-                        Ref.set(internalValueRef, v),
+                    Effect.andThen(
+                        Effect.all([enabledRef, internalValueRef]),
+                        ([enabled, internalValue]) => !Equal.equals(upstreamEncodedValue, enabled ? Option.some(internalValue) : Option.none()),
                     ),
-                    onNone: () => Effect.andThen(
-                        Ref.set(enabledRef, false),
-                        Ref.set(internalValueRef, options.defaultValue),
-                    ),
-                }),
-
-                Effect.andThen(
-                    Effect.all([enabledRef, internalValueRef]),
-                    ([enabled, internalValue]) => !Equal.equals(upstreamEncodedValue, enabled ? Option.some(internalValue) : Option.none()),
                 ),
             ),
-        ),
 
-        Stream.runForEach(
-            enabledRef.changes.pipe(
-                Stream.zipLatest(internalValueRef.changes),
-                Stream.drop(1),
-                Stream.changesWith(Equal.equivalence()),
-                options?.debounce ? Stream.debounce(options.debounce) : identity,
+            Stream.runForEach(
+                enabledRef.changes.pipe(
+                    Stream.zipLatest(internalValueRef.changes),
+                    Stream.drop(1),
+                    Stream.changesWith(Equal.equivalence()),
+                    options?.debounce ? Stream.debounce(options.debounce) : identity,
+                ),
+                ([enabled, internalValue]) => Ref.set(field.encodedValueRef, enabled ? Option.some(internalValue) : Option.none()),
             ),
-            ([enabled, internalValue]) => Ref.set(field.encodedValueRef, enabled ? Option.some(internalValue) : Option.none()),
-        ),
-    ], { concurrency: "unbounded" }), [field, enabledRef, internalValueRef, options.debounce])
+        ], { concurrency: "unbounded" })),
+    ), [field, options.debounce])
 
+    const [enabled, setEnabled] = yield* SubscriptionRef.useSubscriptionRefState(enabledRef)
+    const [value, setValue] = yield* SubscriptionRef.useSubscriptionRefState(internalValueRef)
     return { enabled, setEnabled, value, setValue }
 })

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
-}

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"

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

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

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 }
-})

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 }
-})

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
-    }
-}

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)
-})

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)
-})

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])
-})

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)
-})

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)
-})

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)
-})

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)
-})

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, [])
-})

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
-})

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]
-})

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
-})

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
-})

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
-})

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>
-})

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")
+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

@@ -1,9 +1,10 @@
 /** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
-import { Effect, type Layer, ManagedRuntime, Predicate, type Runtime } from "effect"
+import { Effect, Layer, ManagedRuntime, Predicate, type Runtime } from "effect"
 import * as React from "react"
+import * as Component from "./Component.js"
 
 
-export const TypeId: unique symbol = Symbol.for("effect-fc/ReactRuntime")
+export const TypeId: unique symbol = Symbol.for("@effect-fc/ReactRuntime/ReactRuntime")
 export type TypeId = typeof TypeId
 
 export interface ReactRuntime<R, ER> {
@@ -21,9 +22,12 @@ export const isReactRuntime = (u: unknown): u is ReactRuntime<unknown, unknown>
 export const make = <R, ER>(
     layer: Layer.Layer<R, ER>,
     memoMap?: Layer.MemoMap,
-): ReactRuntime<R, ER> => Object.setPrototypeOf(
+): ReactRuntime<R | Component.ScopeMap, ER> => Object.setPrototypeOf(
     Object.assign(function() {}, {
-        runtime: ManagedRuntime.make(layer, memoMap),
+        runtime: ManagedRuntime.make(
+            Layer.merge(layer, Component.ScopeMap.Default),
+            memoMap,
+        ),
         // biome-ignore lint/style/noNonNullAssertion: context initialization
         context: React.createContext<Runtime.Runtime<R>>(null!),
     }),

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"

packages/effect-fc/src/Subscribable.ts

@@ -1,17 +1,47 @@
-import { Effect, Stream, Subscribable } from "effect"
+import { Effect, Equivalence, pipe, type Scope, Stream, Subscribable } from "effect"
+import * as React from "react"
+import * as Component from "./Component.js"
 
 
-export const zipLatestAll = <T extends ReadonlyArray<Subscribable.Subscribable<any, any, any>>>(
-    ...subscribables: T
+export const zipLatestAll = <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
+    ...elements: T
 ): Subscribable.Subscribable<
     [T[number]] extends [never]
         ? never
         : { [K in keyof T]: T[K] extends Subscribable.Subscribable<infer A, infer _E, infer _R> ? A : never },
-    [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer _R> ? _E : never,
-    [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer _R> ? _R : never
+    [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer E, infer _R> ? E : never,
+    [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer R> ? R : never
 > => Subscribable.make({
-    get: Effect.all(subscribables.map(v => v.get)),
-    changes: Stream.zipLatestAll(...subscribables.map(v => v.changes)),
+    get: Effect.all(elements.map(v => v.get)),
+    changes: Stream.zipLatestAll(...elements.map(v => v.changes)),
 }) as any
 
+export const useSubscribables: {
+    <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
+        ...elements: T
+    ): Effect.Effect<
+        [T[number]] extends [never]
+            ? never
+            : { [K in keyof T]: T[K] extends Subscribable.Subscribable<infer A, infer _E, infer _R> ? A : never },
+        [T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer E, infer _R> ? E : never,
+        ([T[number]] extends [never] ? never : T[number] extends Subscribable.Subscribable<infer _A, infer _E, infer R> ? R : never) | Scope.Scope
+    >
+} = Effect.fnUntraced(function* <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
+    ...elements: T
+) {
+    const [reactStateValue, setReactStateValue] = React.useState(
+        yield* Component.useOnMount(() => Effect.all(elements.map(v => v.get)))
+    )
+
+    yield* Component.useReactEffect(() => Effect.forkScoped(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
+})
+
 export * from "effect/Subscribable"

packages/effect-fc/src/SubscriptionRef.ts

@@ -0,0 +1,48 @@
+import { Effect, Equivalence, Ref, type Scope, Stream, SubscriptionRef } from "effect"
+import * as React from "react"
+import * as Component from "./Component.js"
+import * as SetStateAction from "./SetStateAction.js"
+
+
+export const useSubscriptionRefState: {
+    <A>(
+        ref: SubscriptionRef.SubscriptionRef<A>
+    ): Effect.Effect<readonly [A, React.Dispatch<React.SetStateAction<A>>], never, Scope.Scope>
+} = Effect.fnUntraced(function* <A>(ref: SubscriptionRef.SubscriptionRef<A>) {
+    const [reactStateValue, setReactStateValue] = React.useState(yield* Component.useOnMount(() => 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(
+            Ref.updateAndGet(ref, prevState => SetStateAction.value(setStateAction, prevState)),
+            v => setReactStateValue(v),
+        ),
+    [ref])
+
+    return [reactStateValue, setValue]
+})
+
+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(
+        SubscriptionRef.make(value),
+        ref => 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
+})
+
+export * from "effect/SubscriptionRef"

packages/effect-fc/src/SubscriptionSubRef.ts

@@ -2,7 +2,7 @@ import { Chunk, Effect, Effectable, Option, Predicate, Readable, Ref, Stream, Su
 import * as PropertyPath from "./PropertyPath.js"
 
 
-export const SubscriptionSubRefTypeId: unique symbol = Symbol.for("effect-fc/SubscriptionSubRef")
+export const SubscriptionSubRefTypeId: unique symbol = Symbol.for("effect-fc/SubscriptionSubRef/SubscriptionSubRef")
 export type SubscriptionSubRefTypeId = typeof SubscriptionSubRefTypeId
 
 export interface SubscriptionSubRef<in out A, in out B extends SubscriptionRef.SubscriptionRef<any>>

packages/effect-fc/src/index.ts

@@ -1,10 +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"