packages/example/src/routeTree.gen.ts

@@ -11,15 +11,15 @@
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
-import { Route as TeardownImport } from './routes/teardown'
+import { Route as TimeImport } from './routes/time'
 import { Route as CountImport } from './routes/count'
 import { Route as IndexImport } from './routes/index'
 
 // Create/Update Routes
 
-const TeardownRoute = TeardownImport.update({
-  id: '/teardown',
-  path: '/teardown',
+const TimeRoute = TimeImport.update({
+  id: '/time',
+  path: '/time',
   getParentRoute: () => rootRoute,
 } as any)
 
@@ -53,11 +53,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof CountImport
       parentRoute: typeof rootRoute
     }
-    '/teardown': {
-      id: '/teardown'
-      path: '/teardown'
-      fullPath: '/teardown'
-      preLoaderRoute: typeof TeardownImport
+    '/time': {
+      id: '/time'
+      path: '/time'
+      fullPath: '/time'
+      preLoaderRoute: typeof TimeImport
       parentRoute: typeof rootRoute
     }
   }
@@ -68,41 +68,41 @@ declare module '@tanstack/react-router' {
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/count': typeof CountRoute
-  '/teardown': typeof TeardownRoute
+  '/time': typeof TimeRoute
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/count': typeof CountRoute
-  '/teardown': typeof TeardownRoute
+  '/time': typeof TimeRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
   '/': typeof IndexRoute
   '/count': typeof CountRoute
-  '/teardown': typeof TeardownRoute
+  '/time': typeof TimeRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/count' | '/teardown'
+  fullPaths: '/' | '/count' | '/time'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/count' | '/teardown'
-  id: '__root__' | '/' | '/count' | '/teardown'
+  to: '/' | '/count' | '/time'
+  id: '__root__' | '/' | '/count' | '/time'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   CountRoute: typeof CountRoute
-  TeardownRoute: typeof TeardownRoute
+  TimeRoute: typeof TimeRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   CountRoute: CountRoute,
-  TeardownRoute: TeardownRoute,
+  TimeRoute: TimeRoute,
 }
 
 export const routeTree = rootRoute
@@ -117,7 +117,7 @@ export const routeTree = rootRoute
       "children": [
         "/",
         "/count",
-        "/teardown"
+        "/time"
       ]
     },
     "/": {
@@ -126,8 +126,8 @@ export const routeTree = rootRoute
     "/count": {
       "filePath": "count.tsx"
     },
-    "/teardown": {
-      "filePath": "teardown.tsx"
+    "/time": {
+      "filePath": "time.tsx"
     }
   }
 }

packages/example/src/routes/__root.tsx

@@ -12,6 +12,7 @@ function Root() {
         <Reffuse.Provider>
             <div className="container mx-auto flex-row justify-center items-center gap-2 mb-4">
                 <Link to="/">Index</Link>
+                <Link to="/time">Time</Link>
                 <Link to="/count">Count</Link>
             </div>
 

packages/example/src/routes/teardown.tsx

@@ -1,30 +0,0 @@
-import { Reffuse } from "@/reffuse"
-import { createFileRoute } from "@tanstack/react-router"
-import { DateTime, Effect, Ref, SubscriptionRef } from "effect"
-import { useMemo } from "react"
-
-
-export const Route = createFileRoute("/teardown")({
-    component: Teardown
-})
-
-function Teardown() {
-
-    const runtime = Reffuse.useRuntime()
-
-    const timeRef = useMemo(() => DateTime.now.pipe(
-        Effect.flatMap(SubscriptionRef.make),
-        runtime.runSync,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    ), [])
-
-    Reffuse.useFork(DateTime.now.pipe(
-        Effect.flatMap(Ref.set(timeRef))
-    ))
-
-    const [time] = Reffuse.useRef(timeRef)
-
-
-    return <></>
-
-}

packages/example/src/routes/time.tsx

@@ -0,0 +1,42 @@
+import { Reffuse } from "@/reffuse"
+import { createFileRoute } from "@tanstack/react-router"
+import { Console, DateTime, Effect, Ref, Schedule, SubscriptionRef } from "effect"
+import { useMemo } from "react"
+
+
+export const Route = createFileRoute("/time")({
+    component: Time
+})
+
+function Time() {
+
+    const runtime = Reffuse.useRuntime()
+
+    const timeRef = useMemo(() => DateTime.now.pipe(
+        Effect.flatMap(SubscriptionRef.make),
+        runtime.runSync,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    ), [])
+
+    Reffuse.useFork(Effect.addFinalizer(() => Console.log("Component unmounted.")).pipe(
+        Effect.flatMap(() => DateTime.now),
+        Effect.flatMap(v => Ref.set(timeRef, v)),
+        Effect.repeat(Schedule.spaced("1 second")),
+    ))
+
+    const [time] = Reffuse.useRefState(timeRef)
+
+
+    return (
+        <div className="container mx-auto">
+            <p className="text-center">
+                {DateTime.format(time, {
+                    hour: "numeric",
+                    minute: "numeric",
+                    second: "numeric",
+                })}
+            </p>
+        </div>
+    )
+
+}

packages/reffuse/src/Reffuse.tsx

@@ -1,4 +1,4 @@
-import { Effect, Exit, Fiber, Layer, ManagedRuntime, Ref, Runtime, Stream, SubscriptionRef } from "effect"
+import { Effect, Exit, Fiber, Layer, ManagedRuntime, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
 import React from "react"
 
 
@@ -57,7 +57,7 @@ export class Reffuse<R, ER> {
 
 
     useFork<A, E>(
-        self: Effect.Effect<A, E, R>,
+        self: Effect.Effect<A, E, R | Scope.Scope>,
         deps?: React.DependencyList,
         options?: Runtime.RunForkOptions,
     ): void {