Refactor component creation

packages/effect-fc/src/Async.ts

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

packages/effect-fc/src/Component.ts

@@ -25,8 +25,7 @@ extends
 
     /** @internal */
     makeFunctionComponent(
-        runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
+        runtimeRef: React.Ref<Runtime.Runtime<Exclude<R, Scope.Scope>>>
-        scope: Scope.Scope,
     ): (props: P) => A
 }
 
@@ -58,38 +57,31 @@ const ComponentProto = Object.freeze({
     commit: Effect.fnUntraced(function* <P extends {}, A extends React.ReactNode, E, R>(
         this: Component<P, A, E, R>
     ) {
-        const self = this
         // biome-ignore lint/style/noNonNullAssertion: React ref initialization
         const runtimeRef = React.useRef<Runtime.Runtime<Exclude<R, Scope.Scope>>>(null!)
         runtimeRef.current = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
 
-        return React.useRef(function ScopeProvider(props: P) {
+        return React.useMemo(() => {
-            const scope = Runtime.runSync(runtimeRef.current)(useScope(
+            const f: React.FC<P> = this.makeFunctionComponent(runtimeRef)
-                Array.from(
+            f.displayName = this.displayName ?? "Anonymous"
-                    Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
+            return Memoized.isMemoized(this)
-                ),
+                ? React.memo(f, this.propsAreEqual)
-                self,
-            ))
-
-            const FC = React.useMemo(() => {
-                const f: React.FC<P> = self.makeFunctionComponent(runtimeRef, scope)
-                f.displayName = self.displayName ?? "Anonymous"
-                return Memoized.isMemoized(self)
-                    ? React.memo(f, self.propsAreEqual)
                 : f
-            }, [scope])
+        // biome-ignore lint/correctness/useExhaustiveDependencies: Effect context comparison
-
+        }, Array.from(
-            return React.createElement(FC, props)
+            Context.omit(...nonReactiveTags)(runtimeRef.current.context).unsafeMap.values()
-        }).current
+        ))
     }),
 
     makeFunctionComponent<P extends {}, A extends React.ReactNode, E, R>(
         this: Component<P, A, E, R>,
         runtimeRef: React.RefObject<Runtime.Runtime<Exclude<R, Scope.Scope>>>,
-        scope: Scope.Scope,
     ) {
         return (props: P) => Runtime.runSync(runtimeRef.current)(
-            Effect.provideService(this.body(props), Scope.Scope, scope)
+            Effect.andThen(
+                useScope([], this),
+                scope => Effect.provideService(this.body(props), Scope.Scope, scope),
+            )
         )
     },
 } as const)