Refactor Query

Fix
2026-02-28 20:55:42 +01:00 · 2026-02-28 03:07:10 +01:00 · 2026-02-27 14:53:50 +01:00 · 2026-02-27 14:44:54 +01:00 · 2026-02-27 14:14:54 +01:00 · 2026-02-27 13:21:56 +01:00
17 changed files with 619 additions and 519 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -21,6 +21,7 @@
        "@effect/platform-browser": "^0.74.0",
      },
      "peerDependencies": {
+        "@effect-atom/atom": "^0.5.0",
        "@types/react": "^19.2.0",
        "effect": "^3.19.0",
        "react": "^19.2.0",
@@ -114,14 +115,20 @@

    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.3.11", "", { "os": "win32", "cpu": "x64" }, "sha512-43VrG813EW+b5+YbDbz31uUsheX+qFKCpXeY9kfdAx+ww3naKxeVkTD9zLIWxUPfJquANMHrmW3wbe/037G0Qg=="],

+    "@effect-atom/atom": ["@effect-atom/atom@0.5.3", "", { "peerDependencies": { "@effect/experimental": "^0.58.0", "@effect/platform": "^0.94.2", "@effect/rpc": "^0.73.0", "effect": "^3.19.15" } }, "sha512-TRZv/i+YT3TtnN0oFORJqXdxSs1fc7lrJlH+1xZvDFyjC9hgoVnrcKbeZsDFmr6r0wYRqVo7U3IftxiQNjpNZA=="],
+
    "@effect-fc/example": ["@effect-fc/example@workspace:packages/example"],

+    "@effect/experimental": ["@effect/experimental@0.58.0", "", { "dependencies": { "uuid": "^11.0.3" }, "peerDependencies": { "@effect/platform": "^0.94.0", "effect": "^3.19.13", "ioredis": "^5", "lmdb": "^3" }, "optionalPeers": ["ioredis", "lmdb"] }, "sha512-IEP9sapjF6rFy5TkoqDPc86st/fnqUfjT7Xa3pWJrFGr1hzaMXHo+mWsYOZS9LAOVKnpHuVziDK97EP5qsCHVA=="],
+
    "@effect/language-service": ["@effect/language-service@0.75.0", "", { "bin": { "effect-language-service": "cli.js" } }, "sha512-DxRN8+b5IEQ/x8hukpV39kJe7fs6er7LDWp1PvKjOxPkN5UJ8VJovUVzoHtOX6XWzMmJBRCN9/j0s8jujXTduw=="],

    "@effect/platform": ["@effect/platform@0.94.2", "", { "dependencies": { "find-my-way-ts": "^0.1.6", "msgpackr": "^1.11.4", "multipasta": "^0.2.7" }, "peerDependencies": { "effect": "^3.19.15" } }, "sha512-85vdwpnK4oH/rJ3EuX/Gi2Hkt+K4HvXWr9bxCuqvty9hxyEcRxkJcqTesYrcVoQB6aULb1Za2B0MKoTbvffB3Q=="],

    "@effect/platform-browser": ["@effect/platform-browser@0.74.0", "", { "dependencies": { "multipasta": "^0.2.7" }, "peerDependencies": { "@effect/platform": "^0.94.0", "effect": "^3.19.13" } }, "sha512-PAgkg5L5cASQpScA0SZTSy543MVA4A9kmpVCjo2fCINLRpTeuCFAOQHgPmw8dKHnYS0yGs2TYn7AlrhhqQ5o3g=="],

+    "@effect/rpc": ["@effect/rpc@0.73.2", "", { "dependencies": { "msgpackr": "^1.11.4" }, "peerDependencies": { "@effect/platform": "^0.94.5", "effect": "^3.19.18" } }, "sha512-td7LHDgBOYKg+VgGWEelD8rSAmvjXz7am17vfxZROX5qIYuvH7drL/z4p5xQFadhHZ7DYdlFpqdO9ggc77OCIw=="],
+
    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.27.2", "", { "os": "aix", "cpu": "ppc64" }, "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw=="],

    "@esbuild/android-arm": ["@esbuild/android-arm@0.27.2", "", { "os": "android", "cpu": "arm" }, "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA=="],
@@ -634,6 +641,8 @@

    "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],

+    "uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
+
    "vite": ["vite@7.3.1", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA=="],

    "webpack-virtual-modules": ["webpack-virtual-modules@0.6.2", "", {}, "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="],
--- a/packages/effect-fc/package.json
+++ b/packages/effect-fc/package.json
@@ -41,6 +41,7 @@
    "@effect/platform-browser": "^0.74.0"
  },
  "peerDependencies": {
+    "@effect-atom/atom": "^0.5.0",
    "@types/react": "^19.2.0",
    "effect": "^3.19.0",
    "react": "^19.2.0"
--- a/packages/effect-fc/src/Async.ts
+++ b/packages/effect-fc/src/Async.ts
@@ -7,29 +7,27 @@ import * as Component from "./Component.js"
 export const TypeId: unique symbol = Symbol.for("@effect-fc/Async/Async")
 export type TypeId = typeof TypeId

-export interface Async extends Async.Options {
+export interface Async extends AsyncOptions {
    readonly [TypeId]: TypeId
 }

-export namespace Async {
-    export interface Options {
-        readonly defaultFallback?: React.ReactNode
-    }
-
-    export type Props = Omit<React.SuspenseProps, "children">
+export interface AsyncOptions {
+    readonly defaultFallback?: React.ReactNode
 }

+export type AsyncProps = Omit<React.SuspenseProps, "children">

-const AsyncProto = Object.freeze({
+
+export const AsyncPrototype = Object.freeze({
    [TypeId]: TypeId,

-    makeFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
+    asFunctionComponent<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>>>,
    ) {
        const SuspenseInner = (props: { readonly promise: Promise<React.ReactNode> }) => React.use(props.promise)

-        return ({ fallback, name, ...props }: Async.Props) => {
+        return ({ fallback, name, ...props }: AsyncProps) => {
            const promise = Runtime.runPromise(runtimeRef.current)(
                Effect.andThen(
                    Component.useScope([], this),
@@ -54,7 +52,7 @@ export const async = <T extends Component.Component<any, any, any, any>>(
 ): (
    & Omit<T, keyof Component.Component.AsComponent<T>>
    & Component.Component<
-        Component.Component.Props<T> & Async.Props,
+        Component.Component.Props<T> & AsyncProps,
        Component.Component.Success<T>,
        Component.Component.Error<T>,
        Component.Component.Context<T>
@@ -63,22 +61,22 @@ export const async = <T extends Component.Component<any, any, any, any>>(
 ) => Object.setPrototypeOf(
    Object.assign(function() {}, self),
    Object.freeze(Object.setPrototypeOf(
-        Object.assign({}, AsyncProto),
+        Object.assign({}, AsyncPrototype),
        Object.getPrototypeOf(self),
    )),
 )

 export const withOptions: {
    <T extends Component.Component<any, any, any, any> & Async>(
-        options: Partial<Async.Options>
+        options: Partial<AsyncOptions>
    ): (self: T) => T
    <T extends Component.Component<any, any, any, any> & Async>(
        self: T,
-        options: Partial<Async.Options>,
+        options: Partial<AsyncOptions>,
    ): T
 } = Function.dual(2, <T extends Component.Component<any, any, any, any> & Async>(
    self: T,
-    options: Partial<Async.Options>,
+    options: Partial<AsyncOptions>,
 ): T => Object.setPrototypeOf(
    Object.assign(function() {}, self, options),
    Object.getPrototypeOf(self),
--- a/packages/effect-fc/src/Component.ts
+++ b/packages/effect-fc/src/Component.ts
@@ -1,25 +1,17 @@
 /** biome-ignore-all lint/complexity/noBannedTypes: {} is the default type for React props */
 /** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
-import { Context, type Duration, Effect, Effectable, Equivalence, ExecutionStrategy, Exit, Fiber, Function, HashMap, Layer, ManagedRuntime, Option, Predicate, Ref, Runtime, Scope, Tracer, type Utils } from "effect"
+import { Context, type Duration, Effect, Equivalence, ExecutionStrategy, Exit, Fiber, Function, HashMap, identity, Layer, ManagedRuntime, Option, Pipeable, Predicate, Ref, Runtime, Scope, Tracer, type Utils } from "effect"
 import * as React from "react"
-import { Memoized } from "./index.js"


 export const TypeId: unique symbol = Symbol.for("@effect-fc/Component/Component")
 export type TypeId = typeof TypeId

 /**
- * Interface representing an Effect-based React Component.
- *
- * This is both:
- * - an Effect that produces a React function component
- * - a constructor-like object with component metadata and options
+ * Represents an Effect-based React Component that integrates the Effect system with React.
 */
 export interface Component<P extends {}, A extends React.ReactNode, E, R>
-extends
-    Effect.Effect<(props: P) => A, never, Exclude<R, Scope.Scope>>,
-    Component.Options
-{
+extends ComponentPrototype<P, A, R>, ComponentOptions {
    new(_: never): Record<string, never>
    readonly [TypeId]: TypeId
    readonly "~Props": P
@@ -28,11 +20,6 @@ extends
    readonly "~Context": R

    readonly body: (props: P) => Effect.Effect<A, E, R>
-
-    /** @internal */
-    makeFunctionComponent(
-        runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>
-    ): (props: P) => A
 }

 export declare namespace Component {
@@ -42,56 +29,29 @@ export declare namespace Component {
    export type Context<T extends Component<any, any, any, any>> = [T] extends [Component<infer _P, infer _A, infer _E, infer R>] ? R : never

    export type AsComponent<T extends Component<any, any, any, any>> = Component<Props<T>, Success<T>, Error<T>, Context<T>>
-
-    /**
-     * Options that can be set on the component
-     */
-    export interface Options {
-        /** Custom displayName for React DevTools and debugging. */
-        readonly displayName?: string
-
-        /**
-         * Strategy used when executing finalizers on unmount/scope close.
-         * @default ExecutionStrategy.sequential
-         */
-        readonly finalizerExecutionStrategy: ExecutionStrategy.ExecutionStrategy
-
-        /**
-         * Debounce time before executing finalizers after component unmount.
-         * Helps avoid unnecessary work during fast remount/remount cycles.
-         * @default "100 millis"
-         */
-        readonly finalizerExecutionDebounce: Duration.DurationInput
-    }
 }


-const ComponentProto = Object.freeze({
-    ...Effectable.CommitPrototype,
+export interface ComponentPrototype<P extends {}, A extends React.ReactNode, R>
+extends Pipeable.Pipeable {
+    readonly [TypeId]: TypeId
+    readonly use: Effect.Effect<(props: P) => A, never, Exclude<R, Scope.Scope>>
+
+    asFunctionComponent(
+        runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>
+    ): (props: P) => A
+
+    setFunctionComponentName(f: React.FC<P>): void
+    transformFunctionComponent(f: React.FC<P>): React.FC<P>
+}
+
+export const ComponentPrototype: ComponentPrototype<any, any, any> = Object.freeze({
    [TypeId]: TypeId,
+    ...Pipeable.Prototype,

-    commit: Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode, E, R>(
-        this: Component<P, A, E, R>
-    ) {
-        // 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>>()
+    get use() { return use(this) },

-        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
-            }),
-            Equivalence.array(Equivalence.strict()),
-        )))[0](Array.from(
-            Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
-        ))
-    }),
-
-    makeFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
+    asFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
        this: Component<P, A, E, R>,
        runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
    ) {
@@ -102,14 +62,69 @@ const ComponentProto = Object.freeze({
            )
        )
    },
+
+    setFunctionComponentName<P extends {}, A extends React.ReactNode, E, R>(
+        this: Component<P, A, E, R>,
+        f: React.FC<P>,
+    ) {
+        f.displayName = this.displayName ?? "Anonymous"
+    },
+
+    transformFunctionComponent: identity,
 } as const)

-const defaultOptions: Component.Options = {
+const use = Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode, E, R>(
+    self: Component<P, A, E, R>
+) {
+    // 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 yield* React.useState(() => Runtime.runSync(runtimeRef.current)(Effect.cachedFunction(
+        (_services: readonly any[]) => Effect.sync(() => {
+            const f: React.FC<P> = self.asFunctionComponent(runtimeRef)
+            self.setFunctionComponentName(f)
+            return self.transformFunctionComponent(f)
+        }),
+        Equivalence.array(Equivalence.strict()),
+    )))[0](Array.from(
+        Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
+    ))
+})
+
+
+export interface ComponentOptions {
+    /**
+     * Custom display name for the component in React DevTools and debugging utilities.
+     * Improves developer experience by providing meaningful component identification.
+     */
+    readonly displayName?: string
+
+    /**
+     * Specifies the execution strategy for finalizers when the component unmounts or its scope closes.
+     * Determines whether finalizers execute sequentially or in parallel.
+     *
+     * @default ExecutionStrategy.sequential
+     */
+    readonly finalizerExecutionStrategy: ExecutionStrategy.ExecutionStrategy
+
+    /**
+     * Debounce duration before executing finalizers after component unmount.
+     * Prevents unnecessary cleanup work during rapid remount/unmount cycles,
+     * which is common in development and certain UI patterns.
+     *
+     * @default "100 millis"
+     */
+    readonly finalizerExecutionDebounce: Duration.DurationInput
+}
+
+export const defaultOptions: ComponentOptions = {
    finalizerExecutionStrategy: ExecutionStrategy.sequential,
    finalizerExecutionDebounce: "100 millis",
 }

-const nonReactiveTags = [Tracer.ParentSpan] as const
+
+export const nonReactiveTags = [Tracer.ParentSpan] as const


 export const isComponent = (u: unknown): u is Component<{}, React.ReactNode, unknown, unknown> => Predicate.hasProperty(u, TypeId)
@@ -340,17 +355,51 @@ export declare namespace make {
 }

 /**
- * Creates an Effect-FC Component following the same overloads and pipeline style as `Effect.fn`.
+ * Creates an Effect-FC Component using the same overloads and pipeline composition style as `Effect.fn`.
 *
- * This is the **recommended** way to define components. It supports:
- * - Generator syntax (yield* style) — most ergonomic and readable
- * - Direct Effect return (non-generator)
- * - Chained transformation functions (like Effect.fn pipelines)
- * - Optional tracing span with automatic `displayName`
+ * This is the **recommended** approach for defining Effect-FC components. It provides comprehensive
+ * support for multiple component definition patterns:
 *
- * When you provide a `spanName` as the first argument, two things happen automatically:
- * 1. A tracing span is created with that name (unless using `makeUntraced`)
- * 2. The resulting React component gets `displayName = spanName`
+ * - **Generator syntax** (yield* style): Most ergonomic and readable approach for sequential operations
+ * - **Direct Effect return**: For simple components that return an Effect directly
+ * - **Chained transformation functions**: Enables Effect.fn-style pipelines for composable transformations
+ * - **Automatic tracing**: Optional tracing span creation with automatic `displayName` assignment
+ *
+ * When a `spanName` string is provided, the following occurs automatically:
+ * 1. A distributed tracing span is created with the specified name
+ * 2. The resulting React component receives `displayName = spanName` for DevTools visibility
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = Component.make("MyComponent")(function* (props: { count: number }) {
+ *   const value = yield* someEffect
+ *   return <div>{value}</div>
+ * })
+ * ```
+ *
+ * @example As an opaque type using class syntax
+ * ```tsx
+ * class MyComponent extends Component.make("MyComponent")(function* (props: { count: number }) {
+ *   const value = yield* someEffect
+ *   return <div>{value}</div>
+ * }) {}
+ * ```
+ *
+ * @example Without name
+ * ```tsx
+ * class MyComponent extends Component.make(function* (props: { count: number }) {
+ *   const value = yield* someEffect
+ *   return <div>{value}</div>
+ * }) {}
+ * ```
+ *
+ * @example Using pipeline
+ * ```tsx
+ * class MyComponent extends Component.make("MyComponent")(
+ *   (props: { count: number }) => someEffect,
+ *   Effect.map(value => <div>{value}</div>),
+ * ) {}
+ * ```
 */
 export const make: (
    & make.Gen
@@ -365,7 +414,7 @@ export const make: (
            Object.assign(function() {}, defaultOptions, {
                body: Effect.fn(spanNameOrBody as any, ...pipeables),
            }),
-            ComponentProto,
+            ComponentPrototype,
        )
    }
    else {
@@ -375,21 +424,56 @@ export const make: (
                body: Effect.fn(spanNameOrBody, spanOptions)(body, ...pipeables as []),
                displayName: spanNameOrBody,
            }),
-            ComponentProto,
+            ComponentPrototype,
        )
    }
 }

 /**
- * Same as `make`, but creates an **untraced** version — no automatic tracing span is created.
+ * Creates an Effect-FC Component without automatic distributed tracing.
 *
- * Follows the exact same API shape as `Effect.fnUntraced`.
- * Useful for:
- * - Components where you want full manual control over tracing
- * - Avoiding span noise in deeply nested UI
+ * This function provides the same API surface as `make`, but does not create automatic tracing spans.
+ * It follows the exact same overload structure as `Effect.fnUntraced`.
 *
- * When a string is provided as first argument, it is **only** used as the React component's `displayName`
- * (no tracing span is created).
+ * Use this variant when you need:
+ * - Full manual control over tracing instrumentation
+ * - To reduce tracing overhead in deeply nested component hierarchies
+ * - To avoid span noise in performance-sensitive applications
+ *
+ * When a `spanName` string is provided, it is used **exclusively** as the React component's
+ * `displayName` for DevTools identification. No tracing span is created.
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = Component.makeUntraced("MyComponent")(function* (props: { count: number }) {
+ *   const value = yield* someEffect
+ *   return <div>{value}</div>
+ * })
+ * ```
+ *
+ * @example As an opaque type using class syntax
+ * ```tsx
+ * class MyComponent extends Component.makeUntraced("MyComponent")(function* (props: { count: number }) {
+ *   const value = yield* someEffect
+ *   return <div>{value}</div>
+ * }) {}
+ * ```
+ *
+ * @example Without name
+ * ```tsx
+ * class MyComponent extends Component.makeUntraced(function* (props: { count: number }) {
+ *   const value = yield* someEffect
+ *   return <div>{value}</div>
+ * }) {}
+ * ```
+ *
+ * @example Using pipeline
+ * ```tsx
+ * class MyComponent extends Component.makeUntraced("MyComponent")(
+ *   (props: { count: number }) => someEffect,
+ *   Effect.map(value => <div>{value}</div>),
+ * ) {}
+ * ```
 */
 export const makeUntraced: (
    & make.Gen
@@ -401,52 +485,71 @@ export const makeUntraced: (
            Object.assign(function() {}, defaultOptions, {
                body: Effect.fnUntraced(spanNameOrBody as any, ...pipeables as []),
            }),
-            ComponentProto,
+            ComponentPrototype,
        )
        : (body: any, ...pipeables: any[]) => Object.setPrototypeOf(
            Object.assign(function() {}, defaultOptions, {
                body: Effect.fnUntraced(body, ...pipeables as []),
                displayName: spanNameOrBody,
            }),
-            ComponentProto,
+            ComponentPrototype,
        )
 )

 /**
- * Creates a new component with modified options while preserving original behavior.
+ * Creates a new component with modified configuration options while preserving all original behavior.
+ *
+ * This function allows you to customize component-level options such as finalizer execution strategy
+ * and debounce timing.
+ *
+ * @example
+ * ```tsx
+ * const MyComponentWithCustomOptions = MyComponent.pipe(
+ *   Component.withOptions({
+ *     finalizerExecutionStrategy: ExecutionStrategy.parallel,
+ *     finalizerExecutionDebounce: "50 millis"
+ *   })
+ * )
+ * ```
 */
 export const withOptions: {
    <T extends Component<any, any, any, any>>(
-        options: Partial<Component.Options>
+        options: Partial<ComponentOptions>
    ): (self: T) => T
    <T extends Component<any, any, any, any>>(
        self: T,
-        options: Partial<Component.Options>,
+        options: Partial<ComponentOptions>,
    ): T
 } = Function.dual(2, <T extends Component<any, any, any, any>>(
    self: T,
-    options: Partial<Component.Options>,
+    options: Partial<ComponentOptions>,
 ): T => Object.setPrototypeOf(
    Object.assign(function() {}, self, options),
    Object.getPrototypeOf(self),
 ))

 /**
- * Wraps an Effect-FC `Component` and turns it into a regular React function component
- * that serves as an **entrypoint** into an Effect-FC component hierarchy.
+ * Wraps an Effect-FC Component and converts it into a standard React function component,
+ * serving as an **entrypoint** into an Effect-FC component hierarchy.
 *
- * This is the recommended way to connect Effect-FC components to the rest of your React app,
- * especially when using routers (TanStack Router, React Router, etc.), lazy-loaded routes,
- * or any place where a standard React component is expected.
+ * This is how Effect-FC components are integrated with the broader React ecosystem,
+ * particularly when:
+ * - Using client-side routers (TanStack Router, React Router, etc.)
+ * - Implementing lazy-loaded or code-split routes
+ * - Connecting to third-party libraries expecting standard React components
+ * - Creating component boundaries between Effect-FC and non-Effect-FC code
 *
- * The runtime is obtained from the provided React Context, allowing you to:
- * - Provide dependencies once at a high level
- * - Use the same runtime across an entire route tree or feature
+ * The Effect runtime is obtained from the provided React Context.
 *
- * @example Using TanStack Router
+ * @param self    - The Effect-FC Component to be rendered as a standard React component
+ * @param context - React Context providing the Effect Runtime for this component tree.
+ *                  Create this using the `ReactRuntime` module.
+ *
+ * @example Integration with TanStack Router
 * ```tsx
- * // Main
+ * // Application root
 * export const runtime = ReactRuntime.make(Layer.empty)
+ *
 * function App() {
 *   return (
 *     <ReactRuntime.Provider runtime={runtime}>
@@ -455,14 +558,12 @@ export const withOptions: {
 *   )
 * }
 *
- * // Route
+ * // Route definition
 * export const Route = createFileRoute("/")({
 *   component: Component.withRuntime(HomePage, runtime.context)
 * })
 * ```
 *
- * @param self    - The Effect-FC Component you want to render as a regular React component.
- * @param context - React Context that holds the Runtime to use for this component tree. See the `ReactRuntime` module to create one.
 */
 export const withRuntime: {
    <P extends {}, A extends React.ReactNode, E, R>(
@@ -477,15 +578,17 @@ export const withRuntime: {
    context: React.Context<Runtime.Runtime<R>>,
 ) => function WithRuntime(props: P) {
    return React.createElement(
-        Runtime.runSync(React.useContext(context))(self),
+        Runtime.runSync(React.useContext(context))(self.use),
        props,
    )
 })


 /**
- * Service that keeps track of scopes associated with React components
- * (used internally by the `useScope` hook).
+ * Internal Effect service that maintains a registry of scopes associated with React component instances.
+ *
+ * This service is used internally by the `useScope` hook to manage the lifecycle of component scopes,
+ * including tracking active scopes and coordinating their cleanup when components unmount or dependencies change.
 */
 export class ScopeMap extends Effect.Service<ScopeMap>()("@effect-fc/Component/ScopeMap", {
    effect: Effect.bind(Effect.Do, "ref", () => Ref.make(HashMap.empty<object, ScopeMap.Entry>()))
@@ -507,13 +610,22 @@ export declare namespace useScope {
 }

 /**
- * Hook that creates and manages a `Scope` for the current component instance.
+ * Effect hook that creates and manages a `Scope` for the current component instance.
 *
- * Automatically closes the scope whenever `deps` changes or the component unmounts.
+ * This hook establishes a new scope that is automatically closed when:
+ * - The component unmounts
+ * - The dependency array `deps` changes
 *
- * @param deps - dependency array like in `React.useEffect`
- * @param options - finalizer execution control
- */
+ * The scope provides a resource management boundary for any Effects executed within the component,
+ * ensuring proper cleanup of resources and execution of finalizers.
+ *
+ * @param deps     - Dependency array following React.useEffect semantics. The scope is recreated
+ *                   whenever any dependency changes.
+ * @param options  - Configuration for finalizer execution behavior, including execution strategy
+ *                   and debounce timing.
+ *
+ * @returns An Effect that produces a `Scope` for resource management
+*/
 export const useScope = Effect.fnUntraced(function*(
    deps: React.DependencyList,
    options?: useScope.Options,
@@ -567,7 +679,23 @@ export const useScope = Effect.fnUntraced(function*(
 })

 /**
- * Runs an effect and returns its result only once on component mount.
+ * Effect hook that executes an Effect once when the component mounts and caches the result.
+ *
+ * This hook is useful for one-time initialization logic that should not be re-executed
+ * when the component re-renders. The Effect is executed exactly once during the component's
+ * initial mount, and the cached result is returned on all subsequent renders.
+ *
+ * @param f - A function that returns the Effect to execute on mount
+ *
+ * @returns An Effect that produces the cached result of the Effect
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = Component.make(function*() {
+ *   const initialData = yield* Component.useOnMount(() => getData)
+ *   return <div>{initialData}</div>
+ * })
+ * ```
 */
 export const useOnMount = Effect.fnUntraced(function* <A, E, R>(
    f: () => Effect.Effect<A, E, R>
@@ -581,9 +709,33 @@ export declare namespace useOnChange {
 }

 /**
- * Runs an effect and returns its result whenever dependencies change.
+ * Effect hook that executes an Effect whenever dependencies change and caches the result.
 *
- * Provides its own `Scope` which closes whenever `deps` changes or the component unmounts.
+ * This hook combines the dependency-tracking behavior of React.useEffect with Effect caching.
+ * The Effect is re-executed whenever any dependency in the `deps` array changes, and the result
+ * is cached until the next dependency change.
+ *
+ * A dedicated scope is created for each dependency change, ensuring proper resource cleanup:
+ * - The scope closes when dependencies change
+ * - The scope closes when the component unmounts
+ * - All finalizers are executed according to the configured execution strategy
+ *
+ * @param f       - A function that returns the Effect to execute
+ * @param deps    - Dependency array following React.useEffect semantics
+ * @param options - Configuration for scope and finalizer behavior
+ *
+ * @returns An Effect that produces the cached result of the Effect
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = Component.make(function* (props: { userId: string }) {
+ *   const userData = yield* Component.useOnChange(
+ *     getUser(props.userId),
+ *     [props.userId],
+ *   )
+ *   return <div>{userData.name}</div>
+ * })
+ * ```
 */
 export const useOnChange = Effect.fnUntraced(function* <A, E, R>(
    f: () => Effect.Effect<A, E, R>,
@@ -607,9 +759,36 @@ export declare namespace useReactEffect {
 }

 /**
- * Like `React.useEffect` but accepts an effect.
+ * Effect hook that provides Effect-based semantics for React.useEffect.
 *
- * Cleanup logic is handled through the `Scope` API rather than using imperative cleanup.
+ * This hook bridges React's useEffect with the Effect system, allowing you to use Effects
+ * for React side effects while maintaining React's dependency tracking and lifecycle semantics.
+ *
+ * Unlike React.useEffect which uses imperative cleanup functions, this hook leverages the
+ * Effect Scope API for resource management. Cleanup logic is expressed declaratively through
+ * finalizers registered with the scope, providing better composability and error handling.
+ *
+ * @param f       - A function that returns an Effect to execute as a side effect
+ * @param deps    - Optional dependency array following React.useEffect semantics.
+ *                  If omitted, the effect runs after every render.
+ * @param options - Configuration for finalizer execution mode (sync or fork) and strategy
+ *
+ * @returns An Effect that produces void
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = Component.make(function* (props: { id: string }) {
+ *   yield* Component.useReactEffect(
+ *     () => getNotificationStreamForUser(props.id).pipe(
+ *       Stream.unwrap,
+ *       Stream.runForEach(notification => Console.log(`Notification received: ${ notification }`),
+ *       Effect.forkScoped,
+ *     ),
+ *     [props.id],
+ *   )
+ *   return <div>Subscribed to notifications for {props.id}</div>
+ * })
+ * ```
 */
 export const useReactEffect = Effect.fnUntraced(function* <E, R>(
    f: () => Effect.Effect<void, E, R>,
@@ -648,9 +827,43 @@ export declare namespace useReactLayoutEffect {
 }

 /**
- * Like `React.useReactLayoutEffect` but accepts an effect.
+ * Effect hook that provides Effect-based semantics for React.useLayoutEffect.
 *
- * Cleanup logic is handled through the `Scope` API rather than using imperative cleanup.
+ * This hook is identical to `useReactEffect` but executes synchronously after DOM mutations
+ * but before the browser paints, following React.useLayoutEffect semantics.
+ *
+ * Use this hook when you need to:
+ * - Measure DOM elements (e.g., for layout calculations)
+ * - Synchronously update state based on DOM measurements
+ * - Avoid visual flicker from asynchronous updates
+ *
+ * Like `useReactEffect`, cleanup logic is handled through the Effect Scope API rather than
+ * imperative cleanup functions, providing declarative and composable resource management.
+ *
+ * @param f       - A function that returns an Effect to execute as a layout side effect
+ * @param deps    - Optional dependency array following React.useLayoutEffect semantics.
+ *                  If omitted, the effect runs after every render.
+ * @param options - Configuration for finalizer execution mode (sync or fork) and strategy
+ *
+ * @returns An Effect that produces void
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = Component.make(function*() {
+ *   const ref = React.useRef<HTMLDivElement>(null)
+ *   yield* Component.useReactLayoutEffect(
+ *     () => Effect.gen(function* () {
+ *       const element = ref.current
+ *       if (element) {
+ *         const rect = element.getBoundingClientRect()
+ *         yield* Console.log(`Element dimensions: ${ rect.width }x${ rect.height }`)
+ *       }
+ *     }),
+ *     [],
+ *   )
+ *   return <div ref={ref}>Content</div>
+ * })
+ * ```
 */
 export const useReactLayoutEffect = Effect.fnUntraced(function* <E, R>(
    f: () => Effect.Effect<void, E, R>,
@@ -663,7 +876,23 @@ export const useReactLayoutEffect = Effect.fnUntraced(function* <E, R>(
 })

 /**
- * Get a synchronous run function for the current runtime context.
+ * Effect hook that provides a synchronous function to execute Effects within the current runtime context.
+ *
+ * This hook returns a function that can execute Effects synchronously, blocking until completion.
+ * Use this when you need to run Effects from non-Effect code (e.g., event handlers, callbacks)
+ * within a component.
+ *
+ * @returns An Effect that produces a function capable of synchronously executing Effects
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = Component.make(function*() {
+ *   const runSync = yield* Component.useRunSync<SomeService>() // Specify required services
+ *   const runSync = yield* Component.useRunSync() // Or no service requirements
+ *
+ *   return <button onClick={() => runSync(someEffect)}>Click me</button>
+ * })
+ * ```
 */
 export const useRunSync = <R = never>(): Effect.Effect<
    <A, E = never>(effect: Effect.Effect<A, E, Scope.Scope | R>) => A,
@@ -672,7 +901,23 @@ export const useRunSync = <R = never>(): Effect.Effect<
 > => Effect.andThen(Effect.runtime(), Runtime.runSync)

 /**
- * Get a Promise-based run function for the current runtime context.
+ * Effect hook that provides an asynchronous function to execute Effects within the current runtime context.
+ *
+ * This hook returns a function that executes Effects asynchronously, returning a Promise that resolves
+ * with the Effect's result. Use this when you need to run Effects from non-Effect code (e.g., event handlers,
+ * async callbacks) and want to handle the result asynchronously.
+ *
+ * @returns An Effect that produces a function capable of asynchronously executing Effects
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = Component.make(function*() {
+ *   const runPromise = yield* Component.useRunPromise<SomeService>() // Specify required services
+ *   const runPromise = yield* Component.useRunPromise() // Or no service requirements
+ *
+ *   return <button onClick={() => runPromise(someEffect)}>Click me</button>
+ * })
+ * ```
 */
 export const useRunPromise = <R = never>(): Effect.Effect<
    <A, E = never>(effect: Effect.Effect<A, E, Scope.Scope | R>) => Promise<A>,
@@ -681,7 +926,32 @@ export const useRunPromise = <R = never>(): Effect.Effect<
 > => Effect.andThen(Effect.runtime(), context => Runtime.runPromise(context))

 /**
- * Turns a function returning an effect into a memoized synchronous function.
+ * Effect hook that memoizes a function that returns an Effect, providing synchronous execution.
+ *
+ * This hook wraps a function that returns an Effect and returns a memoized version that:
+ * - Executes the Effect synchronously when called
+ * - Is memoized based on the provided dependency array
+ * - Maintains referential equality across renders when dependencies don't change
+ *
+ * Use this to create stable callback references for event handlers and other scenarios
+ * where you need to execute Effects synchronously from non-Effect code.
+ *
+ * @param f    - A function that accepts arguments and returns an Effect
+ * @param deps - Dependency array. The memoized function is recreated when dependencies change.
+ *
+ * @returns An Effect that produces a memoized function with the same signature as `f`
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = Component.make(function* (props: { onSave: (data: Data) => void }) {
+ *   const handleSave = yield* Component.useCallbackSync(
+ *     (data: Data) => Effect.sync(() => props.onSave(data)),
+ *     [props.onSave],
+ *   )
+ *
+ *   return <button onClick={() => handleSave(myData)}>Save</button>
+ * })
+ * ```
 */
 export const useCallbackSync = Effect.fnUntraced(function* <Args extends unknown[], A, E, R>(
    f: (...args: Args) => Effect.Effect<A, E, R>,
@@ -696,7 +966,32 @@ export const useCallbackSync = Effect.fnUntraced(function* <Args extends unknown
 })

 /**
- * Turns a function returning an effect into a memoized Promise-based asynchronous function.
+ * Effect hook that memoizes a function that returns an Effect, providing asynchronous execution.
+ *
+ * This hook wraps a function that returns an Effect and returns a memoized version that:
+ * - Executes the Effect asynchronously when called, returning a Promise
+ * - Is memoized based on the provided dependency array
+ * - Maintains referential equality across renders when dependencies don't change
+ *
+ * Use this to create stable callback references for async event handlers and other scenarios
+ * where you need to execute Effects asynchronously from non-Effect code.
+ *
+ * @param f    - A function that accepts arguments and returns an Effect
+ * @param deps - Dependency array. The memoized function is recreated when dependencies change.
+ *
+ * @returns An Effect that produces a memoized function that returns a Promise
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = Component.make(function* (props: { onSave: (data: Data) => void }) {
+ *   const handleSave = yield* Component.useCallbackPromise(
+ *     (data: Data) => Effect.promise(() => props.onSave(data)),
+ *     [props.onSave],
+ *   )
+ *
+ *   return <button onClick={() => handleSave(myData)}>Save</button>
+ * })
+ * ```
 */
 export const useCallbackPromise = Effect.fnUntraced(function* <Args extends unknown[], A, E, R>(
    f: (...args: Args) => Effect.Effect<A, E, R>,
@@ -715,16 +1010,70 @@ export declare namespace useContext {
 }

 /**
- * Hook that constructs a layer and returns the created context.
+ * Effect hook that constructs an Effect Layer and returns the resulting context.
 *
- * The layer gets reconstructed everytime `layer` changes, so make sure its value is stable.
+ * This hook creates a managed runtime from the provided layer and returns the context it produces.
+ * The layer is reconstructed whenever its value changes, so ensure the layer reference is stable
+ * (typically by memoizing it or defining it outside the component).
 *
- * Building a layer containing asynchronous effects require the component calling this hook to be made async using `Async.async`.
+ * The hook automatically manages the layer's lifecycle:
+ * - The layer is built when the component mounts or when the layer reference changes
+ * - Resources are properly released when the component unmounts or dependencies change
+ * - Finalizers are executed according to the configured execution strategy
+ *
+ * @param layer   - The Effect Layer to construct. Should be a stable reference to avoid unnecessary
+ *                  reconstruction. Consider memoizing with React.useMemo if defined inline.
+ * @param options - Configuration for scope and finalizer behavior
+ *
+ * @returns An Effect that produces the context created by the layer
+ *
+ * @throws If the layer contains asynchronous effects, the component must be wrapped with `Async.async`
+ *
+ * @example
+ * ```tsx
+ * const MyLayer = Layer.succeed(MyService, new MyServiceImpl())
+ * const MyComponent = Component.make(function*() {
+ *   const context = yield* Component.useContextFromLayer(MyLayer)
+ *   const Sub = yield* SubComponent.use.pipe(
+ *     Effect.provide(context)
+ *   )
+ *
+ *   return <Sub />
+ * })
+ * ```
+ *
+ * @example With memoized layer
+ * ```tsx
+ * const MyComponent = Component.make(function*(props: { id: string })) {
+ *   const context = yield* Component.useContextFromLayer(
+ *     React.useMemo(() => Layer.succeed(MyService, new MyServiceImpl(props.id)), [props.id])
+ *   )
+ *   const Sub = yield* SubComponent.use.pipe(
+ *     Effect.provide(context)
+ *   )
+ *
+ *   return <Sub />
+ * })
+ * ```
+ *
+ * @example With async layer
+ * ```tsx
+ * const MyAsyncLayer = Layer.effect(MyService, someAsyncEffect)
+ * const MyComponent = Component.make(function*() {
+ *   const context = yield* Component.useContextFromLayer(MyAsyncLayer)
+ *   const Sub = yield* SubComponent.use.pipe(
+ *     Effect.provide(context)
+ *   )
+ *
+ *   return <Sub />
+ * }).pipe(
+ *   Async.async // Required to handle async layer effects
+ * )
 */
-export const useContext = <ROut, E, RIn>(
+export const useContextFromLayer = <ROut, E, RIn>(
    layer: Layer.Layer<ROut, E, RIn>,
    options?: useContext.Options,
-): Effect.Effect<Context.Context<ROut>, E, Exclude<RIn, Scope.Scope>> => useOnChange(() => Effect.context<RIn>().pipe(
+): Effect.Effect<Context.Context<ROut>, E, RIn | Scope.Scope> => 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),
--- a/packages/effect-fc/src/Memoized.ts
+++ b/packages/effect-fc/src/Memoized.ts
@@ -1,24 +1,30 @@
 /** biome-ignore-all lint/complexity/useArrowFunction: necessary for class prototypes */
 import { type Equivalence, Function, Predicate } from "effect"
+import * as React from "react"
 import type * as Component from "./Component.js"


 export const TypeId: unique symbol = Symbol.for("@effect-fc/Memoized/Memoized")
 export type TypeId = typeof TypeId

-export interface Memoized<P> extends Memoized.Options<P> {
+export interface Memoized<P> extends MemoizedOptions<P> {
    readonly [TypeId]: TypeId
 }

-export namespace Memoized {
-    export interface Options<P> {
-        readonly propsAreEqual?: Equivalence.Equivalence<P>
-    }
+export interface MemoizedOptions<P> {
+    readonly propsEquivalence?: Equivalence.Equivalence<P>
 }


-const MemoizedProto = Object.freeze({
-    [TypeId]: TypeId
+export const MemoizedPrototype = Object.freeze({
+    [TypeId]: TypeId,
+
+    transformFunctionComponent<P extends {}>(
+        this: Memoized<P>,
+        f: React.FC<P>,
+    ) {
+        return React.memo(f, this.propsEquivalence)
+    },
 } as const)


@@ -29,22 +35,22 @@ export const memoized = <T extends Component.Component<any, any, any, any>>(
 ): T & Memoized<Component.Component.Props<T>> => Object.setPrototypeOf(
    Object.assign(function() {}, self),
    Object.freeze(Object.setPrototypeOf(
-        Object.assign({}, MemoizedProto),
+        Object.assign({}, MemoizedPrototype),
        Object.getPrototypeOf(self),
    )),
 )

 export const withOptions: {
    <T extends Component.Component<any, any, any, any> & Memoized<any>>(
-        options: Partial<Memoized.Options<Component.Component.Props<T>>>
+        options: Partial<MemoizedOptions<Component.Component.Props<T>>>
    ): (self: T) => T
    <T extends Component.Component<any, any, any, any> & Memoized<any>>(
        self: T,
-        options: Partial<Memoized.Options<Component.Component.Props<T>>>,
+        options: Partial<MemoizedOptions<Component.Component.Props<T>>>,
    ): T
 } = Function.dual(2, <T extends Component.Component<any, any, any, any> & Memoized<any>>(
    self: T,
-    options: Partial<Memoized.Options<Component.Component.Props<T>>>,
+    options: Partial<MemoizedOptions<Component.Component.Props<T>>>,
 ): T => Object.setPrototypeOf(
    Object.assign(function() {}, self, options),
    Object.getPrototypeOf(self),
--- a/packages/effect-fc/src/Query.ts
+++ b/packages/effect-fc/src/Query.ts
@@ -6,28 +6,27 @@ import * as Result from "./Result.js"
 export const QueryTypeId: unique symbol = Symbol.for("@effect-fc/Query/Query")
 export type QueryTypeId = typeof QueryTypeId

-export interface Query<in out K extends Query.AnyKey, in out A, in out E = never, in out R = never, in out P = never>
+export interface Query<in out K extends Query.AnyKey, in out A, in out KE = never, in out KR = never, in out E = never, in out R = never>
 extends Pipeable.Pipeable {
    readonly [QueryTypeId]: QueryTypeId

    readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | R>
-    readonly key: Stream.Stream<K>
+    readonly key: Stream.Stream<K, KE, KR>
    readonly f: (key: K) => Effect.Effect<A, E, R>
-    readonly initialProgress: P

    readonly staleTime: Duration.DurationInput
    readonly refreshOnWindowFocus: boolean

    readonly latestKey: Subscribable.Subscribable<Option.Option<K>>
    readonly fiber: Subscribable.Subscribable<Option.Option<Fiber.Fiber<A, E>>>
-    readonly result: Subscribable.Subscribable<Result.Result<A, E, P>>
-    readonly latestFinalResult: Subscribable.Subscribable<Option.Option<Result.Final<A, E, P>>>
+    readonly result: Subscribable.Subscribable<Result.Result<A, E>>
+    readonly latestFinalResult: Subscribable.Subscribable<Option.Option<Result.Success<A, E> | Result.Failure<A, E>>>

    readonly run: Effect.Effect<void>
-    fetch(key: K): Effect.Effect<Result.Final<A, E, P>>
-    fetchSubscribable(key: K): Effect.Effect<Subscribable.Subscribable<Result.Result<A, E, P>>>
-    readonly refresh: Effect.Effect<Result.Final<A, E, P>, Cause.NoSuchElementException>
-    readonly refreshSubscribable: Effect.Effect<Subscribable.Subscribable<Result.Result<A, E, P>>, Cause.NoSuchElementException>
+    fetch(key: K): Effect.Effect<Result.Success<A, E> | Result.Failure<A, E>>
+    fetchSubscribable(key: K): Effect.Effect<Subscribable.Subscribable<Result.Result<A, E>>>
+    readonly refresh: Effect.Effect<Result.Success<A, E> | Result.Failure<A, E>, Cause.NoSuchElementException>
+    readonly refreshSubscribable: Effect.Effect<Subscribable.Subscribable<Result.Result<A, E>>, Cause.NoSuchElementException>

    readonly invalidateCache: Effect.Effect<void>
    invalidateCacheEntry(key: K): Effect.Effect<void>
@@ -37,23 +36,22 @@ export declare namespace Query {
    export type AnyKey = readonly any[]
 }

-export class QueryImpl<in out K extends Query.AnyKey, in out A, in out E = never, in out R = never, in out P = never>
-extends Pipeable.Class() implements Query<K, A, E, R, P> {
+export class QueryImpl<in out K extends Query.AnyKey, in out A, in out KE = never, in out KR = never, in out E = never, in out R = never>
+extends Pipeable.Class() implements Query<K, A, KE, KR, E, R> {
    readonly [QueryTypeId]: QueryTypeId = QueryTypeId

    constructor(
-        readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | R>,
-        readonly key: Stream.Stream<K>,
+        readonly context: Context.Context<Scope.Scope | QueryClient.QueryClient | KR | R>,
+        readonly key: Stream.Stream<K, KE, KR>,
        readonly f: (key: K) => Effect.Effect<A, E, R>,
-        readonly initialProgress: P,

        readonly staleTime: Duration.DurationInput,
        readonly refreshOnWindowFocus: boolean,

        readonly latestKey: SubscriptionRef.SubscriptionRef<Option.Option<K>>,
        readonly fiber: SubscriptionRef.SubscriptionRef<Option.Option<Fiber.Fiber<A, E>>>,
-        readonly result: SubscriptionRef.SubscriptionRef<Result.Result<A, E, P>>,
-        readonly latestFinalResult: SubscriptionRef.SubscriptionRef<Option.Option<Result.Final<A, E, P>>>,
+        readonly result: SubscriptionRef.SubscriptionRef<Result.Success<A, E> | Result.Failure<A, E>>,
+        readonly latestFinalResult: SubscriptionRef.SubscriptionRef<Option.Option<Result.Success<A, E> | Result.Failure<A, E>>>,

        readonly runSemaphore: Effect.Semaphore,
    ) {
@@ -77,6 +75,7 @@ extends Pipeable.Class() implements Query<K, A, E, R, P> {
        ], { concurrency: "unbounded" }).pipe(
            Effect.ignore,
            this.runSemaphore.withPermits(1),
+            Effect.provide(this.context),
        )
    }

@@ -87,7 +86,7 @@ extends Pipeable.Class() implements Query<K, A, E, R, P> {
        }))
    }

-    fetch(key: K): Effect.Effect<Result.Final<A, E, P>> {
+    fetch(key: K): Effect.Effect<Result.Success<A, E> | Result.Failure<A, E>> {
        return this.interrupt.pipe(
            Effect.andThen(SubscriptionRef.set(this.latestKey, Option.some(key))),
            Effect.andThen(this.latestFinalResult),
@@ -151,7 +150,7 @@ extends Pipeable.Class() implements Query<K, A, E, R, P> {

    startCached(
        key: K,
-        initial: Result.Initial | Result.Final<A, E, P>,
+        previous: Result.Success<A, E> | Result.Failure<A, E>,
    ): Effect.Effect<
        Subscribable.Subscribable<Result.Result<A, E, P>>,
        never,
@@ -173,31 +172,46 @@ extends Pipeable.Class() implements Query<K, A, E, R, P> {

    start(
        key: K,
-        initial: Result.Initial | Result.Final<A, E, P>,
+        previous: Result.Success<A, E> | Result.Failure<A, E>,
    ): Effect.Effect<
-        Subscribable.Subscribable<Result.Result<A, E, P>>,
+        Subscribable.Subscribable<Result.Result<A, E>>,
        never,
        Scope.Scope | R
    > {
-        return Result.unsafeForkEffect(
-            Effect.onExit(this.f(key), () => Effect.andThen(
-                Effect.all([Effect.fiberId, this.fiber]),
-                ([currentFiberId, fiber]) => Option.match(fiber, {
-                    onSome: v => Equal.equals(currentFiberId, v.id())
-                        ? SubscriptionRef.set(this.fiber, Option.none())
-                        : Effect.void,
-                    onNone: () => Effect.void,
-                }),
-            )),
+        return Effect.Do.pipe(
+            Effect.bind("ref", () => SubscriptionRef.make<Result.Result<A, E>>(Result.initial())),

-            {
-                initial,
-                initialProgress: this.initialProgress,
-            } as Result.unsafeForkEffect.Options<A, E, P>,
-        ).pipe(
-            Effect.tap(([, fiber]) => SubscriptionRef.set(this.fiber, Option.some(fiber))),
-            Effect.map(([sub]) => sub),
        )
+
+        Effect.onExit(this.f(key), () => Effect.andThen(
+            Effect.all([Effect.fiberId, this.fiber]),
+            ([currentFiberId, fiber]) => Option.match(fiber, {
+                onSome: v => Equal.equals(currentFiberId, v.id())
+                    ? SubscriptionRef.set(this.fiber, Option.none())
+                    : Effect.void,
+                onNone: () => Effect.void,
+            }),
+        ))
+
+        // return Result.unsafeForkEffect(
+        //     Effect.onExit(this.f(key), () => Effect.andThen(
+        //         Effect.all([Effect.fiberId, this.fiber]),
+        //         ([currentFiberId, fiber]) => Option.match(fiber, {
+        //             onSome: v => Equal.equals(currentFiberId, v.id())
+        //                 ? SubscriptionRef.set(this.fiber, Option.none())
+        //                 : Effect.void,
+        //             onNone: () => Effect.void,
+        //         }),
+        //     )),
+
+        //     {
+        //         initial,
+        //         initialProgress: this.initialProgress,
+        //     } as Result.unsafeForkEffect.Options<A, E, P>,
+        // ).pipe(
+        //     Effect.tap(([, fiber]) => SubscriptionRef.set(this.fiber, Option.some(fiber))),
+        //     Effect.map(([sub]) => sub),
+        // )
    }

    watch(
@@ -265,11 +279,11 @@ extends Pipeable.Class() implements Query<K, A, E, R, P> {
    }
 }

-export const isQuery = (u: unknown): u is Query<readonly unknown[], unknown, unknown, unknown, unknown> => Predicate.hasProperty(u, QueryTypeId)
+export const isQuery = (u: unknown): u is Query<readonly unknown[], unknown> => Predicate.hasProperty(u, QueryTypeId)

 export declare namespace make {
-    export interface Options<K extends Query.AnyKey, A, E = never, R = never, P = never> {
-        readonly key: Stream.Stream<K>
+    export interface Options<K extends Query.AnyKey, A, KE = never, KR = never, E = never, R = never, P = never> {
+        readonly key: Stream.Stream<K, KE, KR>
        readonly f: (key: NoInfer<K>) => Effect.Effect<A, E, Result.forkEffect.InputContext<R, NoInfer<P>>>
        readonly initialProgress?: P
        readonly staleTime?: Duration.DurationInput
@@ -277,17 +291,17 @@ export declare namespace make {
    }
 }

-export const make = Effect.fnUntraced(function* <K extends Query.AnyKey, A, E = never, R = never, P = never>(
-    options: make.Options<K, A, E, R, P>
+export const make = Effect.fnUntraced(function* <K extends Query.AnyKey, A, KE = never, KR = never, E = never, R = never, P = never>(
+    options: make.Options<K, A, KE, KR, E, R, P>
 ): Effect.fn.Return<
-    Query<K, A, E, Result.forkEffect.OutputContext<A, E, R, P>, P>,
+    Query<K, A, KE, KR, E, Result.forkEffect.OutputContext<A, E, R, P>, P>,
    never,
-    Scope.Scope | QueryClient.QueryClient | Result.forkEffect.OutputContext<A, E, R, P>
+    Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<A, E, R, P>
 > {
    const client = yield* QueryClient.QueryClient

    return new QueryImpl(
-        yield* Effect.context<Scope.Scope | QueryClient.QueryClient | Result.forkEffect.OutputContext<A, E, R, P>>(),
+        yield* Effect.context<Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<A, E, R, P>>(),
        options.key,
        options.f as any,
        options.initialProgress as P,
@@ -304,12 +318,12 @@ export const make = Effect.fnUntraced(function* <K extends Query.AnyKey, A, E =
    )
 })

-export const service = <K extends Query.AnyKey, A, E = never, R = never, P = never>(
-    options: make.Options<K, A, E, R, P>
+export const service = <K extends Query.AnyKey, A, KE = never, KR = never, E = never, R = never, P = never>(
+    options: make.Options<K, A, KE, KR, E, R, P>
 ): Effect.Effect<
-    Query<K, A, E, Result.forkEffect.OutputContext<A, E, R, P>, P>,
+    Query<K, A, KE, KR, E, Result.forkEffect.OutputContext<A, E, R, P>, P>,
    never,
-    Scope.Scope | QueryClient.QueryClient | Result.forkEffect.OutputContext<A, E, R, P>
+    Scope.Scope | QueryClient.QueryClient | KR | Result.forkEffect.OutputContext<A, E, R, P>
 > => Effect.tap(
    make(options),
    query => Effect.forkScoped(query.run),
--- a/packages/effect-fc/src/Result.ts
+++ b/packages/effect-fc/src/Result.ts
@@ -1,279 +1 @@
-import { Cause, Context, Data, Effect, Equal, Exit, type Fiber, Hash, Layer, Match, Pipeable, Predicate, PubSub, pipe, Ref, type Scope, Stream, Subscribable } from "effect"
-
-
-export const ResultTypeId: unique symbol = Symbol.for("@effect-fc/Result/Result")
-export type ResultTypeId = typeof ResultTypeId
-
-export type Result<A, E = never, P = never> = (
-    | Initial
-    | Running<P>
-    | Final<A, E, P>
-)
-
-// biome-ignore lint/complexity/noBannedTypes: "{}" is relevant here
-export type Final<A, E = never, P = never> = (Success<A> | Failure<E>) & ({} | Flags<P>)
-export type Flags<P = never> = WillFetch | WillRefresh | Refreshing<P>
-
-export declare namespace Result {
-    export interface Prototype extends Pipeable.Pipeable, Equal.Equal {
-        readonly [ResultTypeId]: ResultTypeId
-    }
-
-    export type Success<R extends Result<any, any, any>> = [R] extends [Result<infer A, infer _E, infer _P>] ? A : never
-    export type Failure<R extends Result<any, any, any>> = [R] extends [Result<infer _A, infer E, infer _P>] ? E : never
-    export type Progress<R extends Result<any, any, any>> = [R] extends [Result<infer _A, infer _E, infer P>] ? P : never
-}
-
-export declare namespace Flags {
-    export type Keys = keyof WillFetch & WillRefresh & Refreshing<any>
-}
-
-export interface Initial extends Result.Prototype {
-    readonly _tag: "Initial"
-}
-
-export interface Running<P = never> extends Result.Prototype {
-    readonly _tag: "Running"
-    readonly progress: P
-}
-
-export interface Success<A> extends Result.Prototype {
-    readonly _tag: "Success"
-    readonly value: A
-}
-
-export interface Failure<E = never> extends Result.Prototype {
-    readonly _tag: "Failure"
-    readonly cause: Cause.Cause<E>
-}
-
-export interface WillFetch {
-    readonly _flag: "WillFetch"
-}
-
-export interface WillRefresh {
-    readonly _flag: "WillRefresh"
-}
-
-export interface Refreshing<P = never> {
-    readonly _flag: "Refreshing"
-    readonly progress: P
-}
-
-
-const ResultPrototype = Object.freeze({
-    ...Pipeable.Prototype,
-    [ResultTypeId]: ResultTypeId,
-
-    [Equal.symbol](this: Result<any, any, any>, that: Result<any, any, any>): boolean {
-        if (this._tag !== that._tag || (this as Flags)._flag !== (that as Flags)._flag)
-            return false
-        if (hasRefreshingFlag(this) && !Equal.equals(this.progress, (that as Refreshing<any>).progress))
-            return false
-        return Match.value(this).pipe(
-            Match.tag("Initial", () => true),
-            Match.tag("Running", self => Equal.equals(self.progress, (that as Running<any>).progress)),
-            Match.tag("Success", self => Equal.equals(self.value, (that as Success<any>).value)),
-            Match.tag("Failure", self => Equal.equals(self.cause, (that as Failure<any>).cause)),
-            Match.exhaustive,
-        )
-    },
-
-    [Hash.symbol](this: Result<any, any, any>): number {
-        return pipe(Hash.string(this._tag),
-            tagHash => Match.value(this).pipe(
-                Match.tag("Initial", () => tagHash),
-                Match.tag("Running", self => Hash.combine(Hash.hash(self.progress))(tagHash)),
-                Match.tag("Success", self => Hash.combine(Hash.hash(self.value))(tagHash)),
-                Match.tag("Failure", self => Hash.combine(Hash.hash(self.cause))(tagHash)),
-                Match.exhaustive,
-            ),
-            Hash.combine(Hash.hash((this as Flags)._flag)),
-            hash => hasRefreshingFlag(this)
-                ? Hash.combine(Hash.hash(this.progress))(hash)
-                : hash,
-            Hash.cached(this),
-        )
-    },
-} as const satisfies Result.Prototype)
-
-
-export const isResult = (u: unknown): u is Result<unknown, unknown, unknown> => Predicate.hasProperty(u, ResultTypeId)
-export const isFinal = (u: unknown): u is Final<unknown, unknown, unknown> => isResult(u) && (isSuccess(u) || isFailure(u))
-export const isInitial = (u: unknown): u is Initial => isResult(u) && u._tag === "Initial"
-export const isRunning = (u: unknown): u is Running<unknown> => isResult(u) && u._tag === "Running"
-export const isSuccess = (u: unknown): u is Success<unknown> => isResult(u) && u._tag === "Success"
-export const isFailure = (u: unknown): u is Failure<unknown> => isResult(u) && u._tag === "Failure"
-export const hasFlag = (u: unknown): u is Flags => isResult(u) && Predicate.hasProperty(u, "_flag")
-export const hasWillFetchFlag = (u: unknown): u is WillFetch => isResult(u) && Predicate.hasProperty(u, "_flag") && u._flag === "WillFetch"
-export const hasWillRefreshFlag = (u: unknown): u is WillRefresh => isResult(u) && Predicate.hasProperty(u, "_flag") && u._flag === "WillRefresh"
-export const hasRefreshingFlag = (u: unknown): u is Refreshing<unknown> => isResult(u) && Predicate.hasProperty(u, "_flag") && u._flag === "Refreshing"
-
-export const initial: {
-    (): Initial
-    <A, E = never, P = never>(): Result<A, E, P>
-} = (): Initial => Object.setPrototypeOf({ _tag: "Initial" }, ResultPrototype)
-export const running = <P = never>(progress?: P): Running<P> => Object.setPrototypeOf({ _tag: "Running", progress }, ResultPrototype)
-export const succeed = <A>(value: A): Success<A> => Object.setPrototypeOf({ _tag: "Success", value }, ResultPrototype)
-export const fail = <E>(cause: Cause.Cause<E> ): Failure<E> => Object.setPrototypeOf({ _tag: "Failure", cause }, ResultPrototype)
-
-export const willFetch = <R extends Final<any, any, any>>(
-    result: R
-): Omit<R, keyof Flags.Keys> & WillFetch => Object.setPrototypeOf(
-    Object.assign({}, result, { _flag: "WillFetch" }),
-    Object.getPrototypeOf(result),
-)
-
-export const willRefresh = <R extends Final<any, any, any>>(
-    result: R
-): Omit<R, keyof Flags.Keys> & WillRefresh => Object.setPrototypeOf(
-    Object.assign({}, result, { _flag: "WillRefresh" }),
-    Object.getPrototypeOf(result),
-)
-
-export const refreshing = <R extends Final<any, any, any>, P = never>(
-    result: R,
-    progress?: P,
-): Omit<R, keyof Flags.Keys> & Refreshing<P> => Object.setPrototypeOf(
-    Object.assign({}, result, { _flag: "Refreshing", progress }),
-    Object.getPrototypeOf(result),
-)
-
-export const fromExit: {
-    <A, E>(exit: Exit.Success<A, E>): Success<A>
-    <A, E>(exit: Exit.Failure<A, E>): Failure<E>
-    <A, E>(exit: Exit.Exit<A, E>): Success<A> | Failure<E>
-} = exit => (exit._tag === "Success" ? succeed(exit.value) : fail(exit.cause)) as any
-
-export const toExit: {
-    <A>(self: Success<A>): Exit.Success<A, never>
-    <E>(self: Failure<E>): Exit.Failure<never, E>
-    <A, E, P>(self: Final<A, E, P>): Exit.Exit<A, E>
-    <A, E, P>(self: Result<A, E, P>): Exit.Exit<A, E | Cause.NoSuchElementException>
-} = <A, E, P>(self: Result<A, E, P>): any => {
-    switch (self._tag) {
-        case "Success":
-            return Exit.succeed(self.value)
-        case "Failure":
-            return Exit.failCause(self.cause)
-        default:
-            return Exit.fail(new Cause.NoSuchElementException())
-    }
-}
-
-
-export interface State<A, E = never, P = never> {
-    readonly get: Effect.Effect<Result<A, E, P>>
-    readonly set: (v: Result<A, E, P>) => Effect.Effect<void>
-}
-
-export const State = <A, E = never, P = never>(): Context.Tag<State<A, E, P>, State<A, E, P>> => Context.GenericTag("@effect-fc/Result/State")
-
-export interface Progress<P = never> {
-    readonly update: <E, R>(
-        f: (previous: P) => Effect.Effect<P, E, R>
-    ) => Effect.Effect<void, PreviousResultNotRunningNorRefreshing | E, R>
-}
-
-export class PreviousResultNotRunningNorRefreshing extends Data.TaggedError("@effect-fc/Result/PreviousResultNotRunningNorRefreshing")<{
-    readonly previous: Result<unknown, unknown, unknown>
-}> {}
-
-export const Progress = <P = never>(): Context.Tag<Progress<P>, Progress<P>> => Context.GenericTag("@effect-fc/Result/Progress")
-
-export const makeProgressLayer = <A, E, P = never>(): Layer.Layer<
-    Progress<P>,
-    never,
-    State<A, E, P>
-> => Layer.effect(Progress<P>(), Effect.gen(function*() {
-    const state = yield* State<A, E, P>()
-
-    return {
-        update: <FE, FR>(f: (previous: P) => Effect.Effect<P, FE, FR>) => Effect.Do.pipe(
-            Effect.bind("previous", () => Effect.andThen(state.get, previous =>
-                (isRunning(previous) || hasRefreshingFlag(previous))
-                    ? Effect.succeed(previous)
-                    : Effect.fail(new PreviousResultNotRunningNorRefreshing({ previous })),
-            )),
-            Effect.bind("progress", ({ previous }) => f(previous.progress)),
-            Effect.let("next", ({ previous, progress }) => isRunning(previous)
-                ? running(progress)
-                : refreshing(previous, progress) as Final<A, E, P> & Refreshing<P>
-            ),
-            Effect.andThen(({ next }) => state.set(next)),
-        ),
-    }
-}))
-
-
-export namespace unsafeForkEffect {
-    export type OutputContext<A, E, R, P> = Exclude<R, State<A, E, P> | Progress<P> | Progress<never>>
-
-    export interface Options<A, E, P> {
-        readonly initial?: Initial | Final<A, E, P>
-        readonly initialProgress?: P
-    }
-}
-
-export const unsafeForkEffect = <A, E, R, P = never>(
-    effect: Effect.Effect<A, E, R>,
-    options?: unsafeForkEffect.Options<NoInfer<A>, NoInfer<E>, P>,
-): Effect.Effect<
-    readonly [result: Subscribable.Subscribable<Result<A, E, P>, never, never>, fiber: Fiber.Fiber<A, E>],
-    never,
-    Scope.Scope | unsafeForkEffect.OutputContext<A, E, R, P>
-> => Effect.Do.pipe(
-    Effect.bind("ref", () => Ref.make(options?.initial ?? initial<A, E, P>())),
-    Effect.bind("pubsub", () => PubSub.unbounded<Result<A, E, P>>()),
-    Effect.bind("fiber", ({ ref, pubsub }) => Effect.forkScoped(State<A, E, P>().pipe(
-        Effect.andThen(state => state.set(
-            (isFinal(options?.initial) && hasWillRefreshFlag(options?.initial))
-                ? refreshing(options.initial, options?.initialProgress) as Result<A, E, P>
-                : running(options?.initialProgress)
-        ).pipe(
-            Effect.andThen(effect),
-            Effect.onExit(exit => Effect.andThen(
-                state.set(fromExit(exit)),
-                Effect.forkScoped(PubSub.shutdown(pubsub)),
-            )),
-        )),
-        Effect.provide(Layer.empty.pipe(
-            Layer.provideMerge(makeProgressLayer<A, E, P>()),
-            Layer.provideMerge(Layer.succeed(State<A, E, P>(), {
-                get: ref,
-                set: v => Effect.andThen(Ref.set(ref, v), PubSub.publish(pubsub, v))
-            })),
-        )),
-    ))),
-    Effect.map(({ ref, pubsub, fiber }) => [
-        Subscribable.make({
-            get: ref,
-            changes: Stream.unwrapScoped(Effect.map(
-                Effect.all([ref, Stream.fromPubSub(pubsub, { scoped: true })]),
-                ([latest, stream]) => Stream.concat(Stream.make(latest), stream),
-            )),
-        }),
-        fiber,
-    ]),
-) as Effect.Effect<
-    readonly [result: Subscribable.Subscribable<Result<A, E, P>, never, never>, fiber: Fiber.Fiber<A, E>],
-    never,
-    Scope.Scope | unsafeForkEffect.OutputContext<A, E, R, P>
->
-
-export namespace forkEffect {
-    export type InputContext<R, P> = R extends Progress<infer X> ? [X] extends [P] ? R : never : R
-    export type OutputContext<A, E, R, P> = unsafeForkEffect.OutputContext<A, E, R, P>
-    export interface Options<A, E, P> extends unsafeForkEffect.Options<A, E, P> {}
-}
-
-export const forkEffect: {
-    <A, E, R, P = never>(
-        effect: Effect.Effect<A, E, forkEffect.InputContext<R, NoInfer<P>>>,
-        options?: forkEffect.Options<NoInfer<A>, NoInfer<E>, P>,
-    ): Effect.Effect<
-        readonly [result: Subscribable.Subscribable<Result<A, E, P>, never, never>, fiber: Fiber.Fiber<A, E>],
-        never,
-        Scope.Scope | forkEffect.OutputContext<A, E, R, P>
-    >
-} = unsafeForkEffect
+export * from "@effect-atom/atom/Result"
--- a/packages/example/src/lib/form/TextFieldFormInputView.tsx
+++ b/packages/example/src/lib/form/TextFieldFormInputView.tsx
@@ -18,7 +18,7 @@ extends Omit<TextField.RootProps, "optional" | "defaultValue">, Form.useOptional
 export type TextFieldFormInputProps = Props | OptionalProps


-export class TextFieldFormInput extends Component.makeUntraced("TextFieldFormInput")(function*(props: TextFieldFormInputProps) {
+export class TextFieldFormInputView extends Component.make("TextFieldFormInputView")(function*(props: TextFieldFormInputProps) {
    const input: (
        | { readonly optional: true } & Form.useOptionalInput.Success<string>
        | { readonly optional: false } & Form.useInput.Success<string>
--- a/packages/example/src/routes/dev/async-rendering.tsx
+++ b/packages/example/src/routes/dev/async-rendering.tsx
@@ -9,8 +9,8 @@ import { runtime } from "@/runtime"

 // Generator version
 const RouteComponent = Component.makeUntraced(function* AsyncRendering() {
-    const MemoizedAsyncComponentFC = yield* MemoizedAsyncComponent
-    const AsyncComponentFC = yield* AsyncComponent
+    const MemoizedAsyncComponentFC = yield* MemoizedAsyncComponent.use
+    const AsyncComponentFC = yield* AsyncComponent.use
    const [input, setInput] = React.useState("")

    return (
@@ -51,7 +51,7 @@ const RouteComponent = Component.makeUntraced(function* AsyncRendering() {


 class AsyncComponent extends Component.makeUntraced("AsyncComponent")(function*() {
-    const SubComponentFC = yield* SubComponent
+    const SubComponentFC = yield* SubComponent.use

    yield* Effect.sleep("500 millis") // Async operation
    // Cannot use React hooks after the async operation
--- a/packages/example/src/routes/dev/context.tsx
+++ b/packages/example/src/routes/dev/context.tsx
@@ -23,7 +23,7 @@ const SubComponent = Component.makeUntraced("SubComponent")(function*() {
 const ContextView = Component.makeUntraced("ContextView")(function*() {
    const [serviceValue, setServiceValue] = React.useState("test")
    const SubServiceLayer = React.useMemo(() => SubService.Default(serviceValue), [serviceValue])
-    const SubComponentFC = yield* Effect.provide(SubComponent, yield* Component.useContext(SubServiceLayer))
+    const SubComponentFC = yield* Effect.provide(SubComponent.use, yield* Component.useContextFromLayer(SubServiceLayer))

    return (
        <Container>
--- a/packages/example/src/routes/dev/memo.tsx
+++ b/packages/example/src/routes/dev/memo.tsx
@@ -17,8 +17,8 @@ const RouteComponent = Component.makeUntraced("RouteComponent")(function*() {
                onChange={e => setValue(e.target.value)}
            />

-            {yield* Effect.map(SubComponent, FC => <FC />)}
-            {yield* Effect.map(MemoizedSubComponent, FC => <FC />)}
+            {yield* Effect.map(SubComponent.use, FC => <FC />)}
+            {yield* Effect.map(MemoizedSubComponent.use, FC => <FC />)}
        </Flex>
    )
 }).pipe(
--- a/packages/example/src/routes/form.tsx
+++ b/packages/example/src/routes/form.tsx
@@ -2,7 +2,7 @@ import { Button, Container, Flex, Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Console, Effect, Match, Option, ParseResult, Schema } from "effect"
 import { Component, Form, Subscribable } from "effect-fc"
-import { TextFieldFormInput } from "@/lib/form/TextFieldFormInput"
+import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
 import { DateTimeUtcFromZonedInput } from "@/lib/schema"
 import { runtime } from "@/runtime"

@@ -38,7 +38,7 @@ const RegisterFormSubmitSchema = Schema.Struct({
    birth: Schema.OptionFromSelf(Schema.DateTimeUtcFromSelf),
 })

-class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
+class RegisterFormService extends Effect.Service<RegisterFormService>()("RegisterFormService", {
    scoped: Form.service({
        schema: RegisterFormSchema.pipe(
            Schema.compose(
@@ -62,15 +62,15 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
    })
 }) {}

-class RegisterFormView extends Component.makeUntraced("RegisterFormView")(function*() {
-    const form = yield* RegisterForm
+class RegisterFormView extends Component.make("RegisterFormView")(function*() {
+    const form = yield* RegisterFormService
    const [canSubmit, submitResult] = yield* Subscribable.useSubscribables([
        form.canSubmit,
        form.mutation.result,
    ])

    const runPromise = yield* Component.useRunPromise()
-    const TextFieldFormInputFC = yield* TextFieldFormInput
+    const TextFieldFormInput = yield* TextFieldFormInputView.use

    yield* Component.useOnMount(() => Effect.gen(function*() {
        yield* Effect.addFinalizer(() => Console.log("RegisterFormView unmounted"))
@@ -85,15 +85,15 @@ class RegisterFormView extends Component.makeUntraced("RegisterFormView")(functi
                void runPromise(form.submit)
            }}>
                <Flex direction="column" gap="2">
-                    <TextFieldFormInputFC
+                    <TextFieldFormInput
                        field={yield* form.field(["email"])}
                    />

-                    <TextFieldFormInputFC
+                    <TextFieldFormInput
                        field={yield* form.field(["password"])}
                    />

-                    <TextFieldFormInputFC
+                    <TextFieldFormInput
                        optional
                        type="datetime-local"
                        field={yield* form.field(["birth"])}
@@ -115,13 +115,13 @@ class RegisterFormView extends Component.makeUntraced("RegisterFormView")(functi
    )
 }) {}

-const RegisterPage = Component.makeUntraced("RegisterPage")(function*() {
-    const RegisterFormViewFC = yield* Effect.provide(
-        RegisterFormView,
-        yield* Component.useContext(RegisterForm.Default),
+const RegisterPage = Component.make("RegisterPageView")(function*() {
+    const RegisterForm = yield* Effect.provide(
+        RegisterFormView.use,
+        yield* Component.useContextFromLayer(RegisterFormService.Default),
    )

-    return <RegisterFormViewFC />
+    return <RegisterForm />
 }).pipe(
    Component.withRuntime(runtime.context)
 )
--- a/packages/example/src/routes/index.tsx
+++ b/packages/example/src/routes/index.tsx
@@ -2,19 +2,19 @@ import { createFileRoute } from "@tanstack/react-router"
 import { Effect } from "effect"
 import { Component } from "effect-fc"
 import { runtime } from "@/runtime"
-import { Todos } from "@/todo/Todos"
-import { TodosState } from "@/todo/TodosState.service"
+import { TodosState } from "@/todo/TodosState"
+import { TodosView } from "@/todo/TodosView"


 const TodosStateLive = TodosState.Default("todos")

-const Index = Component.makeUntraced("Index")(function*() {
-    const TodosFC = yield* Effect.provide(
-        Todos,
-        yield* Component.useContext(TodosStateLive),
+const Index = Component.make("IndexView")(function*() {
+    const Todos = yield* Effect.provide(
+        TodosView.use,
+        yield* Component.useContextFromLayer(TodosStateLive),
    )

-    return <TodosFC />
+    return <Todos />
 }).pipe(
    Component.withRuntime(runtime.context)
 )
--- a/packages/example/src/routes/query.tsx
+++ b/packages/example/src/routes/query.tsx
@@ -13,15 +13,16 @@ const Post = Schema.Struct({
    body: Schema.String,
 })

-const ResultView = Component.makeUntraced("Result")(function*() {
+const ResultView = Component.make("ResultView")(function*() {
    const runPromise = yield* Component.useRunPromise()

    const [idRef, query, mutation] = yield* Component.useOnMount(() => Effect.gen(function*() {
        const idRef = yield* SubscriptionRef.make(1)
+        const key = Stream.map(idRef.changes, id => [id] as const)

        const query = yield* Query.service({
-            key: Stream.zipLatest(Stream.make("posts" as const), idRef.changes),
-            f: ([, id]) => HttpClient.HttpClient.pipe(
+            key,
+            f: ([id]) => HttpClient.HttpClient.pipe(
                Effect.tap(Effect.sleep("500 millis")),
                Effect.andThen(client => client.get(`https://jsonplaceholder.typicode.com/posts/${ id }`)),
                Effect.andThen(response => response.json),
--- a/packages/example/src/todo/TodoView.tsx
+++ b/packages/example/src/todo/TodoView.tsx
@@ -5,9 +5,9 @@ import { Component, Form, Subscribable } from "effect-fc"
 import { FaArrowDown, FaArrowUp } from "react-icons/fa"
 import { FaDeleteLeft } from "react-icons/fa6"
 import * as Domain from "@/domain"
-import { TextFieldFormInput } from "@/lib/form/TextFieldFormInput"
+import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
 import { DateTimeUtcFromZonedInput } from "@/lib/schema"
-import { TodosState } from "./TodosState.service"
+import { TodosState } from "./TodosState"


 const TodoFormSchema = Schema.compose(Schema.Struct({
@@ -30,7 +30,7 @@ export type TodoProps = (
    | { readonly _tag: "edit", readonly id: string }
 )

-export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoProps) {
+export class TodoView extends Component.make("TodoView")(function*(props: TodoProps) {
    const state = yield* TodosState

    const [
@@ -83,17 +83,17 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr

    const runSync = yield* Component.useRunSync()
    const runPromise = yield* Component.useRunPromise<DateTime.CurrentTimeZone>()
-    const TextFieldFormInputFC = yield* TextFieldFormInput
+    const TextFieldFormInput = yield* TextFieldFormInputView.use


    return (
        <Flex direction="row" align="center" gap="2">
            <Box flexGrow="1">
                <Flex direction="column" align="stretch" gap="2">
-                    <TextFieldFormInputFC field={contentField} />
+                    <TextFieldFormInput field={contentField} />

                    <Flex direction="row" justify="center" align="center" gap="2">
-                        <TextFieldFormInputFC
+                        <TextFieldFormInput
                            optional
                            field={completedAtField}
                            type="datetime-local"
--- a/packages/example/src/todo/TodosState.service.ts
+++ b/packages/example/src/todo/TodosState.service.ts
--- a/packages/example/src/todo/TodosView.tsx
+++ b/packages/example/src/todo/TodosView.tsx
@@ -1,11 +1,11 @@
 import { Container, Flex, Heading } from "@radix-ui/themes"
 import { Chunk, Console, Effect } from "effect"
 import { Component, Subscribable } from "effect-fc"
-import { Todo } from "./Todo"
-import { TodosState } from "./TodosState.service"
+import { TodosState } from "./TodosState"
+import { TodoView } from "./TodoView"


-export class Todos extends Component.makeUntraced("Todos")(function*() {
+export class TodosView extends Component.make("TodosView")(function*() {
    const state = yield* TodosState
    const [todos] = yield* Subscribable.useSubscribables([state.ref])

@@ -14,17 +14,17 @@ export class Todos extends Component.makeUntraced("Todos")(function*() {
        Effect.addFinalizer(() => Console.log("Todos unmounted")),
    ))

-    const TodoFC = yield* Todo
+    const Todo = yield* TodoView.use

    return (
        <Container>
            <Heading align="center">Todos</Heading>

            <Flex direction="column" align="stretch" gap="2" mt="2">
-                <TodoFC _tag="new" />
+                <Todo _tag="new" />

                {Chunk.map(todos, todo =>
-                    <TodoFC key={todo.id} _tag="edit" id={todo.id} />
+                    <Todo key={todo.id} _tag="edit" id={todo.id} />
                )}
            </Flex>
        </Container>
Author	SHA1	Message	Date
Julien Valverdé	9c03d99998	Refactor Query Some checks failed Lint / lint (push) Failing after 11s Details	2026-02-28 20:55:42 +01:00
Julien Valverdé	6a6733dc8a	Refactor Query Some checks failed Lint / lint (push) Failing after 12s Details	2026-02-28 03:07:10 +01:00
Julien Valverdé	f8a1220f29	Fix All checks were successful Lint / lint (push) Successful in 12s Details	2026-02-27 14:53:50 +01:00
Julien Valverdé	b3fe4a0946	Fix All checks were successful Lint / lint (push) Successful in 17s Details	2026-02-27 14:44:54 +01:00
Julien Valverdé	2766e86f5d	Fix All checks were successful Lint / lint (push) Successful in 12s Details	2026-02-27 14:14:54 +01:00
Julien Valverdé	21028fd75b	Refactor All checks were successful Lint / lint (push) Successful in 12s Details	2026-02-27 13:21:56 +01:00
Julien Valverdé	8e81ec85de	Fix All checks were successful Lint / lint (push) Successful in 12s Details	2026-02-27 10:49:54 +01:00
Julien Valverdé	97246845da	useContext -> useContextFromLayer All checks were successful Lint / lint (push) Successful in 12s Details	2026-02-27 10:45:08 +01:00
Julien Valverdé	2c78b17f52	Update comments Some checks failed Lint / lint (push) Failing after 1m4s Details	2026-02-27 10:16:52 +01:00
Julien Valverdé	6c14495693	Improve comments All checks were successful Lint / lint (push) Successful in 13s Details	2026-02-25 22:33:18 +01:00
Julien Valverdé	a73da25b8c	Fix All checks were successful Lint / lint (push) Successful in 12s Details	2026-02-25 03:18:24 +01:00
Julien Valverdé	d0bc4e4903	Refactor Component All checks were successful Lint / lint (push) Successful in 43s Details	2026-02-25 03:09:51 +01:00