packages/example/src/routeTree.gen.ts

@@ -13,6 +13,7 @@
 import { Route as rootRoute } from './routes/__root'
 import { Route as TimeImport } from './routes/time'
 import { Route as TestsImport } from './routes/tests'
+import { Route as PromiseImport } from './routes/promise'
 import { Route as CountImport } from './routes/count'
 import { Route as BlankImport } from './routes/blank'
 import { Route as IndexImport } from './routes/index'
@@ -31,6 +32,12 @@ const TestsRoute = TestsImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const PromiseRoute = PromiseImport.update({
+  id: '/promise',
+  path: '/promise',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const CountRoute = CountImport.update({
   id: '/count',
   path: '/count',
@@ -74,6 +81,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof CountImport
       parentRoute: typeof rootRoute
     }
+    '/promise': {
+      id: '/promise'
+      path: '/promise'
+      fullPath: '/promise'
+      preLoaderRoute: typeof PromiseImport
+      parentRoute: typeof rootRoute
+    }
     '/tests': {
       id: '/tests'
       path: '/tests'
@@ -97,6 +111,7 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/count': typeof CountRoute
+  '/promise': typeof PromiseRoute
   '/tests': typeof TestsRoute
   '/time': typeof TimeRoute
 }
@@ -105,6 +120,7 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/count': typeof CountRoute
+  '/promise': typeof PromiseRoute
   '/tests': typeof TestsRoute
   '/time': typeof TimeRoute
 }
@@ -114,16 +130,17 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/count': typeof CountRoute
+  '/promise': typeof PromiseRoute
   '/tests': typeof TestsRoute
   '/time': typeof TimeRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/blank' | '/count' | '/tests' | '/time'
+  fullPaths: '/' | '/blank' | '/count' | '/promise' | '/tests' | '/time'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/blank' | '/count' | '/tests' | '/time'
-  id: '__root__' | '/' | '/blank' | '/count' | '/tests' | '/time'
+  to: '/' | '/blank' | '/count' | '/promise' | '/tests' | '/time'
+  id: '__root__' | '/' | '/blank' | '/count' | '/promise' | '/tests' | '/time'
   fileRoutesById: FileRoutesById
 }
 
@@ -131,6 +148,7 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   BlankRoute: typeof BlankRoute
   CountRoute: typeof CountRoute
+  PromiseRoute: typeof PromiseRoute
   TestsRoute: typeof TestsRoute
   TimeRoute: typeof TimeRoute
 }
@@ -139,6 +157,7 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   BlankRoute: BlankRoute,
   CountRoute: CountRoute,
+  PromiseRoute: PromiseRoute,
   TestsRoute: TestsRoute,
   TimeRoute: TimeRoute,
 }
@@ -156,6 +175,7 @@ export const routeTree = rootRoute
         "/",
         "/blank",
         "/count",
+        "/promise",
         "/tests",
         "/time"
       ]
@@ -169,6 +189,9 @@ export const routeTree = rootRoute
     "/count": {
       "filePath": "count.tsx"
     },
+    "/promise": {
+      "filePath": "promise.tsx"
+    },
     "/tests": {
       "filePath": "tests.tsx"
     },

packages/example/src/routes/__root.tsx

@@ -19,6 +19,7 @@ function Root() {
                     <Link to="/time">Time</Link>
                     <Link to="/count">Count</Link>
                     <Link to="/tests">Tests</Link>
+                    <Link to="/promise">Promise</Link>
                     <Link to="/blank">Blank</Link>
                 </Flex>
             </Container>

packages/example/src/routes/promise.tsx

@@ -0,0 +1,31 @@
+import { R } from "@/reffuse"
+import { HttpClient } from "@effect/platform"
+import { createFileRoute } from "@tanstack/react-router"
+import { Console, Effect } from "effect"
+import { use, useMemo } from "react"
+
+
+export const Route = createFileRoute("/promise")({
+    component: RouteComponent
+})
+
+function RouteComponent() {
+
+    const runPromise = R.useRunPromise()
+
+    const promise = useMemo(() => HttpClient.HttpClient.pipe(
+        Effect.flatMap(client => client.get("https://www.uuidtools.com/api/generate/v4")),
+        HttpClient.withTracerPropagation(false),
+        Effect.flatMap(res => res.json),
+        Effect.tap(Console.log),
+
+        Effect.scoped,
+        runPromise,
+    ), [runPromise])
+
+    const value = use(promise)
+
+
+    return <div>Hello "/tests"!</div>
+
+}

packages/example/src/routes/tests.tsx

@@ -2,7 +2,7 @@ import { R } from "@/reffuse"
 import { createFileRoute } from "@tanstack/react-router"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Console, Effect } from "effect"
-import { useEffect, useState } from "react"
+import { useMemo, useState } from "react"
 
 
 export const Route = createFileRoute("/tests")({
@@ -22,20 +22,16 @@ function RouteComponent() {
     // ))
 
     const runPromise = R.useRunPromise()
-    const [promise, setPromise] = useState<Promise<void> | null>(null)
     const [, setValue] = useState("")
 
-    useEffect(() => {
-        makeUuid4.pipe(
+    const promise = useMemo(() => makeUuid4.pipe(
         Effect.provide(GetRandomValues.CryptoRandom),
         Effect.tap(id => Effect.sync(() => setValue(id))),
         Effect.andThen(Console.log),
         Effect.delay("1 second"),
 
         runPromise,
-            setPromise,
-        )
-    }, [runPromise])
+    ), [runPromise])
 
     console.log(promise)