diff --git a/packages/example/src/routeTree.gen.ts b/packages/example/src/routeTree.gen.ts
index 2d2bd51..201dccb 100644
--- a/packages/example/src/routeTree.gen.ts
+++ b/packages/example/src/routeTree.gen.ts
@@ -16,6 +16,7 @@ import { Route as TimeImport } from './routes/time'
 import { Route as TestsImport } from './routes/tests'
 import { Route as PromiseImport } from './routes/promise'
 import { Route as LazyrefImport } from './routes/lazyref'
+import { Route as EffectComponentTestsImport } from './routes/effect-component-tests'
 import { Route as CountImport } from './routes/count'
 import { Route as BlankImport } from './routes/blank'
 import { Route as IndexImport } from './routes/index'
@@ -56,6 +57,12 @@ const LazyrefRoute = LazyrefImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const EffectComponentTestsRoute = EffectComponentTestsImport.update({
+  id: '/effect-component-tests',
+  path: '/effect-component-tests',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const CountRoute = CountImport.update({
   id: '/count',
   path: '/count',
@@ -123,6 +130,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof CountImport
       parentRoute: typeof rootRoute
     }
+    '/effect-component-tests': {
+      id: '/effect-component-tests'
+      path: '/effect-component-tests'
+      fullPath: '/effect-component-tests'
+      preLoaderRoute: typeof EffectComponentTestsImport
+      parentRoute: typeof rootRoute
+    }
     '/lazyref': {
       id: '/lazyref'
       path: '/lazyref'
@@ -195,6 +209,7 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/count': typeof CountRoute
+  '/effect-component-tests': typeof EffectComponentTestsRoute
   '/lazyref': typeof LazyrefRoute
   '/promise': typeof PromiseRoute
   '/tests': typeof TestsRoute
@@ -210,6 +225,7 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/count': typeof CountRoute
+  '/effect-component-tests': typeof EffectComponentTestsRoute
   '/lazyref': typeof LazyrefRoute
   '/promise': typeof PromiseRoute
   '/tests': typeof TestsRoute
@@ -226,6 +242,7 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/blank': typeof BlankRoute
   '/count': typeof CountRoute
+  '/effect-component-tests': typeof EffectComponentTestsRoute
   '/lazyref': typeof LazyrefRoute
   '/promise': typeof PromiseRoute
   '/tests': typeof TestsRoute
@@ -243,6 +260,7 @@ export interface FileRouteTypes {
     | '/'
     | '/blank'
     | '/count'
+    | '/effect-component-tests'
     | '/lazyref'
     | '/promise'
     | '/tests'
@@ -257,6 +275,7 @@ export interface FileRouteTypes {
     | '/'
     | '/blank'
     | '/count'
+    | '/effect-component-tests'
     | '/lazyref'
     | '/promise'
     | '/tests'
@@ -271,6 +290,7 @@ export interface FileRouteTypes {
     | '/'
     | '/blank'
     | '/count'
+    | '/effect-component-tests'
     | '/lazyref'
     | '/promise'
     | '/tests'
@@ -287,6 +307,7 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   BlankRoute: typeof BlankRoute
   CountRoute: typeof CountRoute
+  EffectComponentTestsRoute: typeof EffectComponentTestsRoute
   LazyrefRoute: typeof LazyrefRoute
   PromiseRoute: typeof PromiseRoute
   TestsRoute: typeof TestsRoute
@@ -302,6 +323,7 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   BlankRoute: BlankRoute,
   CountRoute: CountRoute,
+  EffectComponentTestsRoute: EffectComponentTestsRoute,
   LazyrefRoute: LazyrefRoute,
   PromiseRoute: PromiseRoute,
   TestsRoute: TestsRoute,
@@ -326,6 +348,7 @@ export const routeTree = rootRoute
         "/",
         "/blank",
         "/count",
+        "/effect-component-tests",
         "/lazyref",
         "/promise",
         "/tests",
@@ -346,6 +369,9 @@ export const routeTree = rootRoute
     "/count": {
       "filePath": "count.tsx"
     },
+    "/effect-component-tests": {
+      "filePath": "effect-component-tests.tsx"
+    },
     "/lazyref": {
       "filePath": "lazyref.tsx"
     },
diff --git a/packages/example/src/routes/effect-component-tests.tsx b/packages/example/src/routes/effect-component-tests.tsx
new file mode 100644
index 0000000..c564f03
--- /dev/null
+++ b/packages/example/src/routes/effect-component-tests.tsx
@@ -0,0 +1,42 @@
+import { Box, Text, TextField } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import { Console, Effect, Runtime } from "effect"
+import * as React from "react"
+
+
+export const Route = createFileRoute("/effect-component-tests")({
+    component: RouteComponent,
+})
+
+function RouteComponent() {
+    return Effect.runSync(MyTestComponent)
+}
+
+
+const MyTestComponent = Effect.gen(function*() {
+    const [state, setState] = React.useState("value")
+    const effectValue = yield* Effect.succeed(`state: ${ state }`)
+
+    yield* useEffect(() => Console.log("ouient"), [state])
+
+    return <>
+        <Text>{effectValue}</Text>
+
+        <Box>
+            <TextField.Root
+                value={state}
+                onChange={e => setState(e.target.value)}
+            />
+        </Box>
+    </>
+})
+
+
+const useEffect = <A, E, R>(
+    effect: () => Effect.Effect<A, E, R>,
+    deps?: React.DependencyList,
+): Effect.Effect<void, never, R> => Effect.gen(function* useEffect() {
+    const runtime = yield* Effect.runtime<R>()
+
+    React.useEffect(() => Runtime.runSync(runtime)(Effect.asVoid(effect())), deps)
+})