0.1.0 (#1)

Co-authored-by: Julien Valverdé <julien.valverde@mailo.com> Reviewed-on: https://gitea:3000/Thilawyn/effect-fc/pulls/1
2025-07-17 21:17:57 +02:00
parent 7524094a56
commit 3cb0964a48
52 changed files with 1055 additions and 1507 deletions
--- a/packages/effect-fc/README.md
+++ b/packages/effect-fc/README.md
@@ -1,11 +1,51 @@
-# Reffuse
+# Effect FC

-[Effect-TS](https://effect.website/) integration for React 19+ with the aim of integrating the Effect context system within React's component hierarchy, while avoiding touching React's internals.
+[Effect-TS](https://effect.website/) integration for React 19+ that allows you to write function components using Effect generators.

 This library is in early development. While it is (almost) feature complete and mostly usable, expect bugs and quirks. Things are still being ironed out, so ideas and criticisms are more than welcome.

 Documentation is currently being written. In the meantime, you can take a look at the `packages/example` directory.

 ## Peer dependencies
- `effect` 3.13+
+- `effect` 3.15+
 - `react` & `@types/react` 19+
+
+## Known issues
+- Hot module replacement doesn't work for Effect FC's yet. Page reload is required to view changes. Regular React components are unaffected.
+
+## What writing components looks like
+```typescript
+import { Container, Flex, Heading } from "@radix-ui/themes"
+import { Chunk, Console, Effect } from "effect"
+import { Component, Hook } from "effect-fc"
+import { Todo } from "./Todo"
+import { TodosState } from "./TodosState.service"
+
+//           Component.Component<never, TodosState | Scope, {}>
+//           VVV
+export const Todos = Component.make(function* Todos() {
+    const state = yield* TodosState
+    const [todos] = yield* Hook.useSubscribeRefs(state.ref)
+
+    yield* Hook.useOnce(() => Effect.andThen(
+        Console.log("Todos mounted"),
+        Effect.addFinalizer(() => Console.log("Todos unmounted")),
+    ))
+
+    const VTodo = yield* Component.useFC(Todo)
+
+    return (
+        <Container>
+            <Heading align="center">Todos</Heading>
+
+            <Flex direction="column" align="stretch" gap="2" mt="2">
+                <VTodo _tag="new" />
+
+                {Chunk.map(todos, (v, k) =>
+                    <VTodo key={v.id} _tag="edit" index={k} />
+                )}
+            </Flex>
+        </Container>
+    )
+})
+```
--- a/packages/effect-fc/package.json
+++ b/packages/effect-fc/package.json
@@ -1,5 +1,6 @@
 {
  "name": "effect-fc",
+  "description": "Write React function components using Effect generators",
  "version": "0.1.0",
  "type": "module",
  "files": [
--- a/packages/effect-fc/src/Component.ts
+++ b/packages/effect-fc/src/Component.ts
@@ -0,0 +1,464 @@
+import { Context, Effect, type Equivalence, ExecutionStrategy, Function, pipe, Pipeable, Predicate, Runtime, Scope, String, Tracer, type Utils } from "effect"
+import * as React from "react"
+import * as Hook from "./Hook.js"
+import type { ExcludeKeys } from "./utils.js"
+
+
+export interface Component<E, R, P extends {}> extends Pipeable.Pipeable {
+    readonly body: (props: P) => Effect.Effect<React.ReactNode, E, R>
+    readonly displayName?: string
+    readonly options: Component.Options
+}
+
+export namespace Component {
+    export type Error<T> = T extends Component<infer E, infer _R, infer _P> ? E : never
+    export type Context<T> = T extends Component<infer _E, infer R, infer _P> ? R : never
+    export type Props<T> = T extends Component<infer _E, infer _R, infer P> ? P : never
+
+    export interface Options {
+        readonly finalizerExecutionMode: "sync" | "fork"
+        readonly finalizerExecutionStrategy: ExecutionStrategy.ExecutionStrategy
+    }
+}
+
+
+const ComponentProto = Object.seal({
+    pipe() { return Pipeable.pipeArguments(this, arguments) }
+} as const)
+
+const defaultOptions: Component.Options = {
+    finalizerExecutionMode: "sync",
+    finalizerExecutionStrategy: ExecutionStrategy.sequential,
+}
+
+const nonReactiveTags = [Tracer.ParentSpan] as const
+
+
+export namespace make {
+    export type Gen = {
+        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, P extends {} = {}>(
+            body: (props: P) => Generator<Eff, React.ReactNode, never>,
+        ): Component<
+            [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E : never,
+            [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R : never,
+            P
+        >
+        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
+            body: (props: P) => Generator<Eff, A, never>,
+            a: (
+                _: Effect.Effect<
+                    A,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E : never,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R : never
+                >,
+                props: NoInfer<P>,
+            ) => B
+        ): Component<Effect.Effect.Error<B>, Effect.Effect.Context<B>, P>
+        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
+            body: (props: P) => Generator<Eff, A, never>,
+            a: (
+                _: Effect.Effect<
+                    A,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E : never,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R : never
+                >,
+                props: NoInfer<P>,
+            ) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+        ): Component<Effect.Effect.Error<C>, Effect.Effect.Context<C>, P>
+        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
+            body: (props: P) => Generator<Eff, A, never>,
+            a: (
+                _: Effect.Effect<
+                    A,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E : never,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R : never
+                >,
+                props: NoInfer<P>,
+            ) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+            c: (_: C, props: NoInfer<P>) => D,
+        ): Component<Effect.Effect.Error<D>, Effect.Effect.Context<D>, P>
+        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
+            body: (props: P) => Generator<Eff, A, never>,
+            a: (
+                _: Effect.Effect<
+                    A,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E : never,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R : never
+                >,
+                props: NoInfer<P>,
+            ) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+            c: (_: C, props: NoInfer<P>) => D,
+            d: (_: D, props: NoInfer<P>) => E,
+        ): Component<Effect.Effect.Error<E>, Effect.Effect.Context<E>, P>
+        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
+            body: (props: P) => Generator<Eff, A, never>,
+            a: (
+                _: Effect.Effect<
+                    A,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E : never,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R : never
+                >,
+                props: NoInfer<P>,
+            ) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+            c: (_: C, props: NoInfer<P>) => D,
+            d: (_: D, props: NoInfer<P>) => E,
+            e: (_: E, props: NoInfer<P>) => F,
+        ): Component<Effect.Effect.Error<F>, Effect.Effect.Context<F>, P>
+        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
+            body: (props: P) => Generator<Eff, A, never>,
+            a: (
+                _: Effect.Effect<
+                    A,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E : never,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R : never
+                >,
+                props: NoInfer<P>,
+            ) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+            c: (_: C, props: NoInfer<P>) => D,
+            d: (_: D, props: NoInfer<P>) => E,
+            e: (_: E, props: NoInfer<P>) => F,
+            f: (_: F, props: NoInfer<P>) => G,
+        ): Component<Effect.Effect.Error<G>, Effect.Effect.Context<G>, P>
+        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G, H extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
+            body: (props: P) => Generator<Eff, A, never>,
+            a: (
+                _: Effect.Effect<
+                    A,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E : never,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R : never
+                >,
+                props: NoInfer<P>,
+            ) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+            c: (_: C, props: NoInfer<P>) => D,
+            d: (_: D, props: NoInfer<P>) => E,
+            e: (_: E, props: NoInfer<P>) => F,
+            f: (_: F, props: NoInfer<P>) => G,
+            g: (_: G, props: NoInfer<P>) => H,
+        ): Component<Effect.Effect.Error<H>, Effect.Effect.Context<H>, P>
+        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G, H, I extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
+            body: (props: P) => Generator<Eff, A, never>,
+            a: (
+                _: Effect.Effect<
+                    A,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E : never,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R : never
+                >,
+                props: NoInfer<P>,
+            ) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+            c: (_: C, props: NoInfer<P>) => D,
+            d: (_: D, props: NoInfer<P>) => E,
+            e: (_: E, props: NoInfer<P>) => F,
+            f: (_: F, props: NoInfer<P>) => G,
+            g: (_: G, props: NoInfer<P>) => H,
+            h: (_: H, props: NoInfer<P>) => I,
+        ): Component<Effect.Effect.Error<I>, Effect.Effect.Context<I>, P>
+        <Eff extends Utils.YieldWrap<Effect.Effect<any, any, any>>, A, B, C, D, E, F, G, H, I, J extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
+            body: (props: P) => Generator<Eff, A, never>,
+            a: (
+                _: Effect.Effect<
+                    A,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E : never,
+                    [Eff] extends [never] ? never : [Eff] extends [Utils.YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R : never
+                >,
+                props: NoInfer<P>,
+            ) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+            c: (_: C, props: NoInfer<P>) => D,
+            d: (_: D, props: NoInfer<P>) => E,
+            e: (_: E, props: NoInfer<P>) => F,
+            f: (_: F, props: NoInfer<P>) => G,
+            g: (_: G, props: NoInfer<P>) => H,
+            h: (_: H, props: NoInfer<P>) => I,
+            i: (_: I, props: NoInfer<P>) => J,
+        ): Component<Effect.Effect.Error<J>, Effect.Effect.Context<J>, P>
+    }
+
+    export type NonGen = {
+        <Eff extends Effect.Effect<React.ReactNode, any, any>, P extends {} = {}>(
+            body: (props: P) => Eff
+        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, P extends {} = {}>(
+            body: (props: P) => A,
+            a: (_: A, props: NoInfer<P>) => Eff,
+        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, P extends {} = {}>(
+            body: (props: P) => A,
+            a: (_: A, props: NoInfer<P>) => B,
+            b: (_: B, props: NoInfer<P>) => Eff,
+        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, P extends {} = {}>(
+            body: (props: P) => A,
+            a: (_: A, props: NoInfer<P>) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+            c: (_: C, props: NoInfer<P>) => Eff,
+        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, P extends {} = {}>(
+            body: (props: P) => A,
+            a: (_: A, props: NoInfer<P>) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+            c: (_: C, props: NoInfer<P>) => D,
+            d: (_: D, props: NoInfer<P>) => Eff,
+        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, P extends {} = {}>(
+            body: (props: P) => A,
+            a: (_: A, props: NoInfer<P>) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+            c: (_: C, props: NoInfer<P>) => D,
+            d: (_: D, props: NoInfer<P>) => E,
+            e: (_: E, props: NoInfer<P>) => Eff,
+        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, P extends {} = {}>(
+            body: (props: P) => A,
+            a: (_: A, props: NoInfer<P>) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+            c: (_: C, props: NoInfer<P>) => D,
+            d: (_: D, props: NoInfer<P>) => E,
+            e: (_: E, props: NoInfer<P>) => F,
+            f: (_: F, props: NoInfer<P>) => Eff,
+        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, G, P extends {} = {}>(
+            body: (props: P) => A,
+            a: (_: A, props: NoInfer<P>) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+            c: (_: C, props: NoInfer<P>) => D,
+            d: (_: D, props: NoInfer<P>) => E,
+            e: (_: E, props: NoInfer<P>) => F,
+            f: (_: F, props: NoInfer<P>) => G,
+            g: (_: G, props: NoInfer<P>) => Eff,
+        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, G, H, P extends {} = {}>(
+            body: (props: P) => A,
+            a: (_: A, props: NoInfer<P>) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+            c: (_: C, props: NoInfer<P>) => D,
+            d: (_: D, props: NoInfer<P>) => E,
+            e: (_: E, props: NoInfer<P>) => F,
+            f: (_: F, props: NoInfer<P>) => G,
+            g: (_: G, props: NoInfer<P>) => H,
+            h: (_: H, props: NoInfer<P>) => Eff,
+        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+        <Eff extends Effect.Effect<React.ReactNode, any, any>, A, B, C, D, E, F, G, H, I, P extends {} = {}>(
+            body: (props: P) => A,
+            a: (_: A, props: NoInfer<P>) => B,
+            b: (_: B, props: NoInfer<P>) => C,
+            c: (_: C, props: NoInfer<P>) => D,
+            d: (_: D, props: NoInfer<P>) => E,
+            e: (_: E, props: NoInfer<P>) => F,
+            f: (_: F, props: NoInfer<P>) => G,
+            g: (_: G, props: NoInfer<P>) => H,
+            h: (_: H, props: NoInfer<P>) => I,
+            i: (_: I, props: NoInfer<P>) => Eff,
+        ): Component<Effect.Effect.Error<Eff>, Effect.Effect.Context<Eff>, P>
+    }
+}
+
+export const make: (
+    & make.Gen
+    & make.NonGen
+    & ((
+        spanName: string,
+        spanOptions?: Tracer.SpanOptions,
+    ) => make.Gen & make.NonGen)
+) = (spanNameOrBody: Function | string, ...pipeables: any[]) => {
+    if (typeof spanNameOrBody !== "string") {
+        const displayName = displayNameFromBody(spanNameOrBody)
+        return Object.setPrototypeOf({
+            body: displayName
+                ? Effect.fn(displayName)(spanNameOrBody as any, ...pipeables as [])
+                : Effect.fn(spanNameOrBody as any, ...pipeables),
+            displayName,
+            options: { ...defaultOptions },
+        }, ComponentProto)
+    }
+    else {
+        const spanOptions = pipeables[0]
+        return (body: any, ...pipeables: any[]) => Object.setPrototypeOf({
+            body: Effect.fn(spanNameOrBody, spanOptions)(body, ...pipeables as []),
+            displayName: displayNameFromBody(body) ?? spanNameOrBody,
+            options: { ...defaultOptions },
+        }, ComponentProto)
+    }
+}
+
+export const makeUntraced: make.Gen & make.NonGen = (body: Function, ...pipeables: any[]) => Object.setPrototypeOf({
+    body: Effect.fnUntraced(body as any, ...pipeables as []),
+    displayName: displayNameFromBody(body),
+    options: { ...defaultOptions },
+}, ComponentProto)
+
+const displayNameFromBody = (body: Function) => !String.isEmpty(body.name) ? body.name : undefined
+
+
+export const withDisplayName: {
+    <T extends Component<any, any, any>>(
+        displayName: string
+    ): (self: T) => T
+    <T extends Component<any, any, any>>(
+        self: T,
+        displayName: string,
+    ): T
+} = Function.dual(2, <T extends Component<any, any, any>>(
+    self: T,
+    displayName: string,
+): T => Object.setPrototypeOf(
+    { ...self, displayName },
+    Object.getPrototypeOf(self),
+))
+
+export const withOptions: {
+    <T extends Component<any, any, any>>(
+        options: Partial<Component.Options>
+    ): (self: T) => T
+    <T extends Component<any, any, any>>(
+        self: T,
+        options: Partial<Component.Options>,
+    ): T
+} = Function.dual(2, <T extends Component<any, any, any>>(
+    self: T,
+    options: Partial<Component.Options>,
+): T => Object.setPrototypeOf(
+    { ...self, options: { ...self.options, ...options } },
+    Object.getPrototypeOf(self),
+))
+
+export const withRuntime: {
+    <E, R, P extends {}>(
+        context: React.Context<Runtime.Runtime<R>>,
+    ): (self: Component<E, R | Scope.Scope, P>) => React.FC<P>
+    <E, R, P extends {}>(
+        self: Component<E, R | Scope.Scope, P>,
+        context: React.Context<Runtime.Runtime<R>>,
+    ): React.FC<P>
+} = Function.dual(2, <E, R, P extends {}>(
+    self: Component<E, R | Scope.Scope, P>,
+    context: React.Context<Runtime.Runtime<R>>,
+): React.FC<P> => function WithRuntime(props) {
+    const runtime = React.useContext(context)
+    return React.createElement(Runtime.runSync(runtime)(useFC(self)), props)
+})
+
+
+export interface Memoized<P> {
+    readonly memo: true
+    readonly memoOptions: Memoized.Options<P>
+}
+
+export namespace Memoized {
+    export interface Options<P> {
+        readonly propsAreEqual?: Equivalence.Equivalence<P>
+    }
+}
+
+export const memo = <T extends Component<any, any, any>>(
+    self: ExcludeKeys<T, keyof Memoized<Component.Props<T>>>
+): T & Memoized<Component.Props<T>> => Object.setPrototypeOf(
+    { ...self, memo: true, memoOptions: {} },
+    Object.getPrototypeOf(self),
+)
+
+export const memoWithEquivalence: {
+    <T extends Component<any, any, any>>(
+        propsAreEqual: Equivalence.Equivalence<Component.Props<T>>
+    ): (
+        self: ExcludeKeys<T, keyof Memoized<Component.Props<T>>>
+    ) => T & Memoized<Component.Props<T>>
+    <T extends Component<any, any, any>>(
+        self: ExcludeKeys<T, keyof Memoized<Component.Props<T>>>,
+        propsAreEqual: Equivalence.Equivalence<Component.Props<T>>,
+    ): T & Memoized<Component.Props<T>>
+} = Function.dual(2, <T extends Component<any, any, any>>(
+    self: ExcludeKeys<T, keyof Memoized<Component.Props<T>>>,
+    propsAreEqual: Equivalence.Equivalence<Component.Props<T>>,
+): T & Memoized<Component.Props<T>> => Object.setPrototypeOf(
+    { ...self, memo: true, memoOptions: { propsAreEqual } },
+    Object.getPrototypeOf(self),
+))
+
+
+export interface Suspense {
+    readonly suspense: true
+}
+
+export type SuspenseProps = Omit<React.SuspenseProps, "children">
+
+export const suspense = <T extends Component<any, any, P>, P extends {}>(
+    self: ExcludeKeys<T, keyof Suspense> & Component<any, any, ExcludeKeys<P, keyof SuspenseProps>>
+): T & Suspense => Object.setPrototypeOf(
+    { ...self, suspense: true },
+    Object.getPrototypeOf(self),
+)
+
+
+export const useFC: {
+    <E, R, P extends {}>(
+        self: Component<E, R, P> & Suspense
+    ): Effect.Effect<React.FC<P & SuspenseProps>, never, Exclude<R, Scope.Scope>>
+    <E, R, P extends {}>(
+        self: Component<E, R, P>
+    ): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>
+} = Effect.fn("useFC")(function* <E, R, P extends {}>(
+    self: Component<E, R, P> & (Memoized<P> | Suspense | {})
+) {
+    const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
+    runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
+
+    return React.useCallback(function ScopeProvider(props: P) {
+        const scope = Runtime.runSync(runtimeRef.current)(Hook.useScope(
+            Array.from(
+                Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
+            ),
+            self.options,
+        ))
+
+        const FC = React.useMemo(() => {
+            const f: React.FC<P> = Predicate.hasProperty(self, "suspense")
+                ? pipe(
+                    function SuspenseInner(props: { readonly promise: Promise<React.ReactNode> }) {
+                        return React.use(props.promise)
+                    },
+
+                    SuspenseInner => ({ fallback, name, ...props }: P & SuspenseProps) => {
+                        const promise = Runtime.runPromise(runtimeRef.current)(
+                            Effect.provideService(self.body(props as P), Scope.Scope, scope)
+                        )
+
+                        return React.createElement(
+                            React.Suspense,
+                            { fallback, name },
+                            React.createElement(SuspenseInner, { promise }),
+                        )
+                    },
+                )
+                : (props: P) => Runtime.runSync(runtimeRef.current)(
+                    Effect.provideService(self.body(props), Scope.Scope, scope)
+                )
+
+            f.displayName = self.displayName ?? "Anonymous"
+            return Predicate.hasProperty(self, "memo")
+                ? React.memo(f, self.memoOptions.propsAreEqual)
+                : f
+        }, [scope])
+
+        return React.createElement(FC, props)
+    }, [])
+})
+
+export const use: {
+    <E, R, P extends {}>(
+        self: Component<E, R, P> & Suspense,
+        fn: (Component: React.FC<P & SuspenseProps>) => React.ReactNode,
+    ): Effect.Effect<React.ReactNode, never, Exclude<R, Scope.Scope>>
+    <E, R, P extends {}>(
+        self: Component<E, R, P>,
+        fn: (Component: React.FC<P>) => React.ReactNode,
+    ): Effect.Effect<React.ReactNode, never, Exclude<R, Scope.Scope>>
+} = Effect.fn("use")(function*(self, fn) {
+    return fn(yield* useFC(self))
+})
--- a/packages/effect-fc/src/ReactHook.ts
+++ b/packages/effect-fc/src/ReactHook.ts
@@ -1,22 +1,26 @@
-import { type Context, Effect, ExecutionStrategy, Exit, type Layer, Option, pipe, PubSub, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
+import { type Context, Effect, Equivalence, ExecutionStrategy, Exit, type Layer, Option, pipe, PubSub, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
 import * as React from "react"
 import { SetStateAction } from "./types/index.js"


 export interface ScopeOptions {
-    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
    readonly finalizerExecutionMode?: "sync" | "fork"
+    readonly finalizerExecutionStrategy?: ExecutionStrategy.ExecutionStrategy
 }


 export const useScope: {
-    (options?: ScopeOptions): Effect.Effect<Scope.Scope>
-} = Effect.fnUntraced(function* (options?: ScopeOptions) {
+    (
+        deps: React.DependencyList,
+        options?: ScopeOptions,
+    ): Effect.Effect<Scope.Scope>
+} = Effect.fn("useScope")(function*(deps, options) {
    const runtime = yield* Effect.runtime()

-    const [isInitialRun, initialScope] = React.useMemo(() => Runtime.runSync(runtime)(
-        Effect.all([Ref.make(true), makeScope(options)])
-    ), [])
+    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)(
@@ -26,17 +30,16 @@ export const useScope: {
                () => closeScope(scope, runtime, options),
            ),

-            onFalse: () => makeScope(options).pipe(
+            onFalse: () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential).pipe(
                Effect.tap(scope => Effect.sync(() => setScope(scope))),
                Effect.map(scope => () => closeScope(scope, runtime, options)),
            ),
        })
-    ), [])
+    ), deps)

    return scope
 })

-const makeScope = (options?: ScopeOptions) => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
 const closeScope = (
    scope: Scope.CloseableScope,
    runtime: Runtime.Runtime<never>,
@@ -53,44 +56,12 @@ const closeScope = (
 }


-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()
-    return yield* React.useMemo(() => Runtime.runSync(runtime)(Effect.cached(factory())), deps)
-})
-
-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, [])
-})
-
-export const useMemoLayer: {
-    <ROut, E, RIn>(
-        layer: Layer.Layer<ROut, E, RIn>
-    ): Effect.Effect<Context.Context<ROut>, E, RIn>
-} = Effect.fnUntraced(function* <ROut, E, RIn>(
-    layer: Layer.Layer<ROut, E, RIn>
-) {
-    return yield* useMemo(() => Effect.provide(Effect.context<ROut>(), layer), [layer])
-})
-
-
 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>(
+} = Effect.fn("useCallbackSync")(function* <Args extends unknown[], A, E, R>(
    callback: (...args: Args) => Effect.Effect<A, E, R>,
    deps: React.DependencyList,
 ) {
@@ -103,7 +74,7 @@ export const useCallbackPromise: {
        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>(
+} = Effect.fn("useCallbackPromise")(function* <Args extends unknown[], A, E, R>(
    callback: (...args: Args) => Effect.Effect<A, E, R>,
    deps: React.DependencyList,
 ) {
@@ -112,37 +83,49 @@ export const useCallbackPromise: {
 })


+export const useMemo: {
+    <A, E, R>(
+        factory: () => Effect.Effect<A, E, R>,
+        deps: React.DependencyList,
+    ): Effect.Effect<A, E, R>
+} = Effect.fn("useMemo")(function* <A, E, R>(
+    factory: () => Effect.Effect<A, E, R>,
+    deps: React.DependencyList,
+) {
+    const runtime = yield* Effect.runtime()
+    return yield* React.useMemo(() => Runtime.runSync(runtime)(Effect.cached(factory())), deps)
+})
+
+export const useOnce: {
+    <A, E, R>(factory: () => Effect.Effect<A, E, R>): Effect.Effect<A, E, R>
+} = Effect.fn("useOnce")(function* <A, E, R>(
+    factory: () => Effect.Effect<A, E, R>
+) {
+    return yield* useMemo(factory, [])
+})
+
+
 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.fn("useEffect")(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(() => {
-        const { scope, exit } = Effect.Do.pipe(
-            Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)),
-            Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(effect(), Scope.Scope, scope))),
-            Runtime.runSync(runtime),
-        )
-
-        return () => {
-            switch (options?.finalizerExecutionMode ?? "sync") {
-                case "sync":
-                    Runtime.runSync(runtime)(Scope.close(scope, exit))
-                    break
-                case "fork":
-                    Runtime.runFork(runtime)(Scope.close(scope, exit))
-                    break
-            }
-        }
-    }, deps)
+    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),
+    ), deps)
 })

 export const useLayoutEffect: {
@@ -151,31 +134,21 @@ export const useLayoutEffect: {
        deps?: React.DependencyList,
        options?: ScopeOptions,
    ): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
-} = Effect.fnUntraced(function* <E, R>(
+} = Effect.fn("useLayoutEffect")(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(() => {
-        const { scope, exit } = Effect.Do.pipe(
-            Effect.bind("scope", () => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)),
-            Effect.bind("exit", ({ scope }) => Effect.exit(Effect.provideService(effect(), Scope.Scope, scope))),
-            Runtime.runSync(runtime),
-        )
-
-        return () => {
-            switch (options?.finalizerExecutionMode ?? "sync") {
-                case "sync":
-                    Runtime.runSync(runtime)(Scope.close(scope, exit))
-                    break
-                case "fork":
-                    Runtime.runFork(runtime)(Scope.close(scope, exit))
-                    break
-            }
-        }
-    }, deps)
+    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),
+    ), deps)
 })

 export const useFork: {
@@ -184,7 +157,7 @@ export const useFork: {
        deps?: React.DependencyList,
        options?: Runtime.RunForkOptions & ScopeOptions,
    ): Effect.Effect<void, never, Exclude<R, Scope.Scope>>
-} = Effect.fnUntraced(function* <E, R>(
+} = Effect.fn("useFork")(function* <E, R>(
    effect: () => Effect.Effect<void, E, R>,
    deps?: React.DependencyList,
    options?: Runtime.RunForkOptions & ScopeOptions,
@@ -194,27 +167,39 @@ export const useFork: {
    React.useEffect(() => {
        const scope = Runtime.runSync(runtime)(options?.scope
            ? Scope.fork(options.scope, options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
-            : Scope.make(options?.finalizerExecutionStrategy)
+            : Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
        )
        Runtime.runFork(runtime)(Effect.provideService(effect(), Scope.Scope, scope), { ...options, scope })
-
-        return () => {
-            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
-            }
-        }
+        return () => closeScope(scope, runtime, {
+            ...options,
+            finalizerExecutionMode: options?.finalizerExecutionMode ?? "fork",
+        })
    }, deps)
 })


+export const useContext: {
+    <ROut, E, RIn>(
+        layer: Layer.Layer<ROut, E, RIn>,
+        options?: ScopeOptions,
+    ): Effect.Effect<Context.Context<ROut>, E, Exclude<RIn, Scope.Scope>>
+} = Effect.fn("useContext")(function* <ROut, E, RIn>(
+    layer: Layer.Layer<ROut, E, RIn>,
+    options?: ScopeOptions,
+) {
+    const scope = yield* useScope([layer], options)
+
+    return yield* useMemo(() => Effect.provideService(
+        Effect.provide(Effect.context<ROut>(), layer),
+        Scope.Scope,
+        scope,
+    ), [scope])
+})
+
+
 export const useRefFromReactiveValue: {
    <A>(value: A): Effect.Effect<SubscriptionRef.SubscriptionRef<A>>
-} = Effect.fnUntraced(function*(value) {
+} = Effect.fn("useRefFromReactiveValue")(function*(value) {
    const ref = yield* useOnce(() => SubscriptionRef.make(value))
    yield* useEffect(() => Ref.set(ref, value), [value])
    return ref
@@ -224,7 +209,7 @@ export const useSubscribeRefs: {
    <const Refs extends readonly SubscriptionRef.SubscriptionRef<any>[]>(
        ...refs: Refs
    ): Effect.Effect<{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }>
-} = Effect.fnUntraced(function* <const Refs extends readonly SubscriptionRef.SubscriptionRef<any>[]>(
+} = Effect.fn("useSubscribeRefs")(function* <const Refs extends readonly SubscriptionRef.SubscriptionRef<any>[]>(
    ...refs: Refs
 ) {
    const [reactStateValue, setReactStateValue] = React.useState(yield* useOnce(() =>
@@ -232,7 +217,7 @@ export const useSubscribeRefs: {
    ))

    yield* useFork(() => pipe(
-        refs.map(ref => Stream.changesWith(ref.changes, (x, y) => x === y)),
+        refs.map(ref => Stream.changesWith(ref.changes, Equivalence.strict())),
        streams => Stream.zipLatestAll(...streams),
        Stream.runForEach(v =>
            Effect.sync(() => setReactStateValue(v))
@@ -246,11 +231,11 @@ 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>) {
+} = Effect.fn("useRefState")(function* <A>(ref: SubscriptionRef.SubscriptionRef<A>) {
    const [reactStateValue, setReactStateValue] = React.useState(yield* useOnce(() => ref))

    yield* useFork(() => Stream.runForEach(
-        Stream.changesWith(ref.changes, (x, y) => x === y),
+        Stream.changesWith(ref.changes, Equivalence.strict()),
        v => Effect.sync(() => setReactStateValue(v)),
    ), [ref])

@@ -268,7 +253,7 @@ 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) {
+} = Effect.fn("useStreamFromReactiveValues")(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)),
@@ -297,7 +282,7 @@ export const useSubscribeStream: {
        stream: Stream.Stream<A, E, R>,
        initialValue: A,
    ): Effect.Effect<Option.Some<A>, never, R>
-} = Effect.fnUntraced(function* <A extends NonNullable<unknown>, E, R>(
+} = Effect.fn("useSubscribeStream")(function* <A extends NonNullable<unknown>, E, R>(
    stream: Stream.Stream<A, E, R>,
    initialValue?: A,
 ) {
@@ -309,7 +294,7 @@ export const useSubscribeStream: {
    )

    yield* useFork(() => Stream.runForEach(
-        Stream.changesWith(stream, (x, y) => x === y),
+        Stream.changesWith(stream, Equivalence.strict()),
        v => Effect.sync(() => setReactStateValue(Option.some(v))),
    ), [stream])

--- a/packages/effect-fc/src/ReactComponent.ts
+++ b/packages/effect-fc/src/ReactComponent.ts
@@ -1,72 +0,0 @@
-import { Context, Effect, Function, Runtime, Scope, Tracer } from "effect"
-import type { Mutable } from "effect/Types"
-import * as React from "react"
-import * as ReactHook from "./ReactHook.js"
-
-
-export interface ReactComponent<E, R, P> {
-    (props: P): Effect.Effect<React.ReactNode, E, R>
-    readonly displayName?: string
-}
-
-export const nonReactiveTags = [Tracer.ParentSpan] as const
-
-export const withDisplayName: {
-    <C extends ReactComponent<any, any, any>>(displayName: string): (self: C) => C
-    <C extends ReactComponent<any, any, any>>(self: C, displayName: string): C
-} = Function.dual(2, <C extends ReactComponent<any, any, any>>(
-    self: C,
-    displayName: string,
-): C => {
-    (self as Mutable<C>).displayName = displayName
-    return self
-})
-
-export const useFC: {
-    <E, R, P extends {} = {}>(
-        self: ReactComponent<E, R, P>,
-        options?: ReactHook.ScopeOptions,
-    ): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>
-} = Effect.fnUntraced(function* <E, R, P extends {}>(
-    self: ReactComponent<E, R, P>,
-    options?: ReactHook.ScopeOptions,
-) {
-    const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
-
-    return React.useMemo(() => function ScopeProvider(props: P) {
-        const scope = Runtime.runSync(runtime)(ReactHook.useScope(options))
-
-        const FC = React.useMemo(() => {
-            const f = (props: P) => Runtime.runSync(runtime)(
-                Effect.provideService(self(props), Scope.Scope, scope)
-            )
-            if (self.displayName) f.displayName = self.displayName
-            return f
-        }, [scope])
-
-        return React.createElement(FC, props)
-    }, Array.from(
-        Context.omit(...nonReactiveTags)(runtime.context).unsafeMap.values()
-    ))
-})
-
-export const use: {
-    <E, R, P extends {} = {}>(
-        self: ReactComponent<E, R, P>,
-        fn: (Component: React.FC<P>) => React.ReactNode,
-        options?: ReactHook.ScopeOptions,
-    ): Effect.Effect<React.ReactNode, never, Exclude<R, Scope.Scope>>
-} = Effect.fnUntraced(function*(self, fn, options) {
-    return fn(yield* useFC(self, options))
-})
-
-export const withRuntime: {
-    <E, R, P extends {} = {}>(context: React.Context<Runtime.Runtime<R>>): (self: ReactComponent<E, R, P>) => React.FC<P>
-    <E, R, P extends {} = {}>(self: ReactComponent<E, R, P>, context: React.Context<Runtime.Runtime<R>>): React.FC<P>
-} = Function.dual(2, <E, R, P extends {}>(
-    self: ReactComponent<E, R, P>,
-    context: React.Context<Runtime.Runtime<R>>,
-): React.FC<P> => function WithRuntime(props) {
-    const runtime = React.useContext(context)
-    return React.createElement(Runtime.runSync(runtime)(useFC(self)), props)
-})
--- a/packages/effect-fc/src/ReactManagedRuntime.ts
+++ b/packages/effect-fc/src/ReactManagedRuntime.ts
@@ -16,31 +16,31 @@ export const make = <R, ER>(
 })


-export interface AsyncProviderProps<R, ER> extends React.SuspenseProps {
+export interface ProviderProps<R, ER> extends React.SuspenseProps {
    readonly runtime: ReactManagedRuntime<R, ER>
    readonly children?: React.ReactNode
 }

-export function AsyncProvider<R, ER>(
-    { runtime, children, ...suspenseProps }: AsyncProviderProps<R, ER>
+export function Provider<R, ER>(
+    { runtime, children, ...suspenseProps }: ProviderProps<R, ER>
 ): React.ReactNode {
    const promise = React.useMemo(() => Effect.runPromise(runtime.runtime.runtimeEffect), [runtime])

    return React.createElement(
        React.Suspense,
        suspenseProps,
-        React.createElement(AsyncProviderInner<R, ER>, { runtime, promise, children }),
+        React.createElement(ProviderInner<R, ER>, { runtime, promise, children }),
    )
 }

-interface AsyncProviderInnerProps<R, ER> {
+interface ProviderInnerProps<R, ER> {
    readonly runtime: ReactManagedRuntime<R, ER>
    readonly promise: Promise<Runtime.Runtime<R>>
    readonly children?: React.ReactNode
 }

-function AsyncProviderInner<R, ER>(
-    { runtime, promise, children }: AsyncProviderInnerProps<R, ER>
+function ProviderInner<R, ER>(
+    { runtime, promise, children }: ProviderInnerProps<R, ER>
 ): React.ReactNode {
    const value = React.use(promise)
    return React.createElement(runtime.context, { value }, children)
--- a/packages/effect-fc/src/index.ts
+++ b/packages/effect-fc/src/index.ts
@@ -1,3 +1,3 @@
-export * as ReactComponent from "./ReactComponent.js"
-export * as ReactHook from "./ReactHook.js"
+export * as Component from "./Component.js"
+export * as Hook from "./Hook.js"
 export * as ReactManagedRuntime from "./ReactManagedRuntime.js"
--- a/packages/effect-fc/src/types/SubscriptionSubRef.ts
+++ b/packages/effect-fc/src/types/SubscriptionSubRef.ts
@@ -1,4 +1,4 @@
-import { Effect, Effectable, Option, Readable, Ref, Stream, Subscribable, SubscriptionRef, SynchronizedRef, type Types, type Unify } from "effect"
+import { Chunk, Effect, Effectable, Option, Readable, Ref, Stream, Subscribable, SubscriptionRef, SynchronizedRef, type Types, type Unify } from "effect"
 import * as PropertyPath from "./PropertyPath.js"


@@ -52,7 +52,7 @@ class SubscriptionSubRefImpl<in out A, in out B> extends Effectable.Class<A> imp
        readonly setter: (parentValue: B, value: A) => B,
    ) {
        super()
-        this.get = Effect.map(Ref.get(this.parent), this.getter)
+        this.get = Effect.map(this.parent, this.getter)
    }

    commit() {
@@ -86,9 +86,11 @@ class SubscriptionSubRefImpl<in out A, in out B> extends Effectable.Class<A> imp

 export const makeFromGetSet = <A, B>(
    parent: SubscriptionRef.SubscriptionRef<B>,
-    getter: (parentValue: B) => A,
-    setter: (parentValue: B, value: A) => B,
-): SubscriptionSubRef<A, B> => new SubscriptionSubRefImpl(parent, getter, setter)
+    options: {
+        readonly get: (parentValue: B) => A
+        readonly set: (parentValue: B, value: A) => B
+    },
+): SubscriptionSubRef<A, B> => new SubscriptionSubRefImpl(parent, options.get, options.set)

 export const makeFromPath = <B, const P extends PropertyPath.Paths<B>>(
    parent: SubscriptionRef.SubscriptionRef<B>,
@@ -98,3 +100,12 @@ export const makeFromPath = <B, const P extends PropertyPath.Paths<B>>(
    parentValue => Option.getOrThrow(PropertyPath.get(parentValue, path)),
    (parentValue, value) => Option.getOrThrow(PropertyPath.immutableSet(parentValue, path, value)),
 )
+
+export const makeFromChunkRef = <A>(
+    parent: SubscriptionRef.SubscriptionRef<Chunk.Chunk<A>>,
+    index: number,
+): SubscriptionSubRef<A, Chunk.Chunk<A>> => new SubscriptionSubRefImpl(
+    parent,
+    parentValue => Chunk.unsafeGet(parentValue, index),
+    (parentValue, value) => Chunk.replace(parentValue, index, value),
+)
--- a/packages/effect-fc/src/utils.ts
+++ b/packages/effect-fc/src/utils.ts
@@ -0,0 +1,3 @@
+export type ExcludeKeys<T, K extends PropertyKey> = K extends keyof T ? (
+    { [P in K]?: never } & Omit<T, K>
+) : T