useSuspenseScoped

packages/example/src/routes/tests.tsx

@@ -1,6 +1,6 @@
 import { R } from "@/reffuse"
 import { createFileRoute } from "@tanstack/react-router"
-import { Effect } from "effect"
+import { Console, Effect } from "effect"
 
 
 export const Route = createFileRoute("/tests")({
@@ -12,8 +12,13 @@ function RouteComponent() {
     //     Effect.map(() => "test")
     // ))
 
-    const value = R.useSuspense(Effect.succeed("test"))
-    console.log(value)
+    R.useSuspenseScoped(Effect.addFinalizer(() => Console.log("cleanup")).pipe(
+        Effect.andThen(Effect.promise(() => new Promise<string>(resolve =>
+            resolve("test")
+        ))),
+
+        Effect.tap(Console.log),
+    ), [])
 
     return <div>Hello "/tests"!</div>
 }

packages/reffuse/src/Reffuse.ts

@@ -226,20 +226,6 @@ export class Reffuse<R> {
         ])
     }
 
-    useSuspense<A, E>(
-        effect: Effect.Effect<A, E, R>,
-        deps?: React.DependencyList,
-        options?: { readonly signal?: AbortSignal } & RenderOptions,
-    ): A {
-        const runPromise = this.useRunPromise()
-
-        const promise = React.useMemo(() => runPromise(effect, options), [
-            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runPromise],
-            ...(deps ?? []),
-        ])
-        return React.use(promise)
-    }
-
     /**
      * An asynchronous and non-blocking alternative to `React.useEffect`.
      *
@@ -291,6 +277,44 @@ export class Reffuse<R> {
         ])
     }
 
+    // useSuspense<A, E>(
+    //     effect: Effect.Effect<A, E, R>,
+    //     deps?: React.DependencyList,
+    //     options?: { readonly signal?: AbortSignal } & RenderOptions,
+    // ): A {
+    //     const runPromise = this.useRunPromise()
+
+    //     const promise = React.useMemo(() => runPromise(effect, options), [
+    //         ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runPromise],
+    //         ...(deps ?? []),
+    //     ])
+    //     return React.use(promise)
+    // }
+
+    useSuspenseScoped<A, E>(
+        effect: Effect.Effect<A, E, R | Scope.Scope>,
+        deps?: React.DependencyList,
+        options?: { readonly signal?: AbortSignal } & RenderOptions & ScopeOptions,
+    ): A {
+        const runSync = this.useRunSync()
+        const runPromise = this.useRunPromise()
+
+        const initialPromise = React.useMemo(() => runPromise(Effect.scoped(effect)), [])
+        const [promise, setPromise] = React.useState(initialPromise)
+
+        React.useEffect(() => {
+            const scope = runSync(Scope.make())
+            setPromise(runPromise(Effect.provideService(effect, Scope.Scope, scope), options))
+
+            return () => { runPromise(Scope.close(scope, Exit.void)) }
+        }, [
+            ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync, runPromise],
+            ...(deps ?? []),
+        ])
+
+        return React.use(promise)
+    }
+
 
     useRef<A>(value: A): SubscriptionRef.SubscriptionRef<A> {
         return this.useMemo(