packages/example/src/routes/index.tsx

@@ -1,9 +1,10 @@
+import { Reffuse } from "@/reffuse"
 import { TodosContext } from "@/todos/reffuse"
 import { TodosState } from "@/todos/services"
 import { VTodos } from "@/todos/views/VTodos"
 import { Container } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
-import { Layer } from "effect"
+import { Console, Effect, Layer } from "effect"
 import { useMemo } from "react"
 
 
@@ -17,6 +18,10 @@ function Index() {
         Layer.provideMerge(TodosState.make("todos"))
     ), [])
 
+    Reffuse.useEffect(Effect.addFinalizer(() => Console.log("Effect cleanup")).pipe(
+        Effect.flatMap(() => Console.log("Effect recalculated"))
+    ))
+
 
     return (
         <Container>

packages/reffuse/src/Reffuse.ts

@@ -1,4 +1,4 @@
-import { Context, Effect, Fiber, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
+import { Context, Effect, Exit, Fiber, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
 import React from "react"
 import * as ReffuseContext from "./ReffuseContext.js"
 import * as ReffuseRuntime from "./ReffuseRuntime.js"
@@ -75,7 +75,14 @@ export class Reffuse<R> {
     ): void {
         const runSync = this.useRunSync()
 
-        return React.useEffect(() => { runSync(Effect.scoped(effect)) }, [
+        return React.useEffect(() => {
+            const scope = Scope.make().pipe(
+                Effect.tap(scope => Scope.use(effect, scope)),
+                runSync,
+            )
+
+            return () => runSync(Scope.close(scope, Exit.void))
+        }, [
             ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
             ...(deps ?? []),
         ])