From 7cc0a68170578a0863dab3ce49ca2e3ad08eaa20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Tue, 1 Jul 2025 00:23:45 +0200
Subject: [PATCH] useMemoLayer

---
 packages/effect-components/src/ReactHook.ts       | 15 ++++++++++++++-
 .../example/src/routes/effect-component-tests.tsx |  8 +-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/effect-components/src/ReactHook.ts b/packages/effect-components/src/ReactHook.ts
index befe806..87d4072 100644
--- a/packages/effect-components/src/ReactHook.ts
+++ b/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>,
diff --git a/packages/example/src/routes/effect-component-tests.tsx b/packages/example/src/routes/effect-component-tests.tsx
index fb95aae..a506451 100644
--- a/packages/example/src/routes/effect-component-tests.tsx
+++ b/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.context<SubService>().pipe(
-                        Effect.provide(SubService.Default),
-                        Runtime.runSync(runtime),
-                    ),
-                []))
+                Effect.provide(yield* ReactHook.useMemoLayer(SubService.Default))
             )}
         </>
     }),