useMemoLayer

packages/effect-components/src/ReactHook.ts

@@ -1,4 +1,4 @@
-import { Effect, ExecutionStrategy, Exit, pipe, Runtime, Scope, Stream, SubscriptionRef } from "effect"
+import { type Context, Effect, ExecutionStrategy, Exit, type Layer, pipe, Runtime, Scope, Stream, SubscriptionRef } from "effect"
 import * as React from "react"
 
 
@@ -29,6 +29,19 @@ export const useOnce: {
     return yield* useMemo(factory, [])
 })
 
+export const useMemoLayer: {
+    <ROut, E, RIn>(
+        layer: Layer.Layer<ROut, E, RIn>
+    ): Effect.Effect<Context.Context<ROut>, never, RIn>
+} = Effect.fnUntraced(function* <ROut, E, RIn>(
+    layer: Layer.Layer<ROut, E, RIn>
+) {
+    const runtime = yield* Effect.runtime<RIn>()
+    return React.useMemo(() => Runtime.runSync(runtime)(
+        Effect.provide(Effect.context<ROut>(), layer)
+    ), [layer])
+})
+
 export const useEffect: {
     <E, R>(
         effect: () => Effect.Effect<void, E, R>,

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

@@ -2,7 +2,6 @@ import { Box, TextField } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Console, Effect, Layer, pipe, Ref, Runtime, SubscriptionRef } from "effect"
 import { ReactComponent, ReactHook, ReactManagedRuntime } from "effect-components"
-import * as React from "react"
 
 
 const LogLive = Layer.scopedDiscard(Effect.acquireRelease(
@@ -52,12 +51,7 @@ const MyRoute = pipe(
             </Box>
 
             {yield* ReactComponent.use(MyTestComponent, C => <C />).pipe(
-                Effect.provide(React.useMemo(() =>
+                Effect.provide(yield* ReactHook.useMemoLayer(SubService.Default))
-                    Effect.context<SubService>().pipe(
-                        Effect.provide(SubService.Default),
-                        Runtime.runSync(runtime),
-                    ),
-                []))
             )}
         </>
     }),