React component refactoring

packages/effect-components/src/ReactComponent.ts

@@ -7,71 +7,48 @@ export interface ReactComponent<P, E, R> {
     (props: P): Effect.Effect<React.ReactNode, E, R>
 }
 
+export const nonReactiveTags = [Tracer.ParentSpan] as const
+
 
 export const useFC: {
     <P, E, R>(
         self: ReactComponent<P, E, R>,
         options?: ReactHook.ScopeOptions,
     ): Effect.Effect<React.FC<P>, never, Exclude<R, Scope.Scope>>
-} = Effect.fn(function* useFC<P, E, R>(
+} = Effect.fnUntraced(function* useFC<P, E, R>(
     self: ReactComponent<P, E, R>,
     options?: ReactHook.ScopeOptions,
 ) {
     const runtime = yield* Effect.runtime<Exclude<R, Scope.Scope>>()
 
-    return React.useCallback((props: P) => Runtime.runSync(runtime)(
-        self(props) as Effect.Effect<React.ReactNode, E, Exclude<R, Scope.Scope>>
-    ), [])
+    return React.useCallback((props: P) => {
+        const [isInitialRun, initialScope] = React.useMemo(() => Runtime.runSync(runtime)(
+            Effect.all([Ref.make(true), makeScope(options)])
+        ), [])
+        const [scope, setScope] = React.useState(initialScope)
+
+        React.useEffect(() => Runtime.runSync(runtime)(
+            Effect.if(isInitialRun, {
+                onTrue: () => Effect.as(
+                    Ref.set(isInitialRun, false),
+                    () => closeScope(scope, runtime, options),
+                ),
+
+                onFalse: () => makeScope(options).pipe(
+                    Effect.tap(scope => Effect.sync(() => setScope(scope))),
+                    Effect.map(scope => () => closeScope(scope, runtime, options)),
+                ),
+            })
+        ), [])
+
+        return Runtime.runSync(runtime)(
+            Effect.provideService(self(props), Scope.Scope, scope)
+        )
+    }, Array.from(
+        Context.omit(...nonReactiveTags)(runtime.context).unsafeMap.values()
+    ))
 })
 
-export const use: {
-    <P, E, R>(
-        self: ReactComponent<P, E, R>,
-        fn: (Component: React.FC<P>) => React.ReactNode,
-        options?: ReactHook.ScopeOptions,
-    ): Effect.Effect<React.ReactNode, never, Exclude<R, Scope.Scope>>
-} = Effect.fn(function* use<P, E, R>(
-    self: ReactComponent<P, E, R>,
-    fn: (Component: React.FC<P>) => React.ReactNode,
-    options?: ReactHook.ScopeOptions,
-) {
-    return fn(yield* useFC(self, options))
-})
-
-
-const FC = <P, E, R>(
-    self: ReactComponent<P, E, R>,
-    runtime: Runtime.Runtime<R>,
-    props: P,
-    options?: ReactHook.ScopeOptions,
-): React.ReactNode => {
-    const [isInitialRun, initialScope] = React.useMemo(() => Runtime.runSync(runtime)(
-        Effect.all([Ref.make(true), makeScope(options)])
-    ), [])
-    const [scope, setScope] = React.useState(initialScope)
-
-    React.useEffect(() => Runtime.runSync(runtime)(
-        Effect.if(isInitialRun, {
-            onTrue: () => Effect.as(
-                Ref.set(isInitialRun, false),
-                () => closeScope(scope, runtime, options),
-            ),
-
-            onFalse: () => makeScope(options).pipe(
-                Effect.tap(scope => Effect.sync(() => setScope(scope))),
-                Effect.map(scope => () => closeScope(scope, runtime, options)),
-            ),
-        })
-    ), [])
-
-    return React.useMemo(() => Runtime.runSync(runtime)(
-        Effect.provideService(self(props), Scope.Scope, scope)
-    ), [
-        props,
-        ...Array.from(Context.omit(Tracer.ParentSpan)(runtime.context).unsafeMap.values()),
-    ])
-}
-
 const makeScope = (options?: ReactHook.ScopeOptions) => Scope.make(options?.finalizerExecutionStrategy ?? ExecutionStrategy.sequential)
 const closeScope = (
     scope: Scope.CloseableScope,
@@ -87,3 +64,17 @@ const closeScope = (
             break
     }
 }
+
+export const use: {
+    <P, E, R>(
+        self: ReactComponent<P, E, R>,
+        fn: (Component: React.FC<P>) => React.ReactNode,
+        options?: ReactHook.ScopeOptions,
+    ): Effect.Effect<React.ReactNode, never, Exclude<R, Scope.Scope>>
+} = Effect.fnUntraced(function* use<P, E, R>(
+    self: ReactComponent<P, E, R>,
+    fn: (Component: React.FC<P>) => React.ReactNode,
+    options?: ReactHook.ScopeOptions,
+) {
+    return fn(yield* useFC(self, options))
+})

packages/example/src/routes/effect-component-tests.tsx

@@ -15,9 +15,7 @@ function RouteComponent() {
     return <>
         {runtime.runSync(ReactComponent.use(MyTestComponent, Component => (
             <Component />
-        )).pipe(
-            Effect.scoped
-        ))}
+        )))}
     </>
 }
 
@@ -30,10 +28,10 @@ const MyTestComponent = Effect.fn(function* MyTestComponent(props?: { readonly v
     const [state, setState] = React.useState("value")
     const effectValue = yield* Effect.succeed(`state: ${ state }`)
 
-    yield* ReactHook.useOnce(() => Effect.andThen(
+    yield* ReactHook.useEffect(() => Effect.andThen(
         Effect.addFinalizer(() => Console.log("MyTestComponent umounted")),
         Console.log("MyTestComponent mounted"),
-    ))
+    ), [])
 
     return <>
         <Text>{effectValue}</Text>