diff --git a/bun.lock b/bun.lock
index 7d09a3c..1180c56 100644
--- a/bun.lock
+++ b/bun.lock
@@ -10,6 +10,15 @@
         "typescript": "^5.8.3",
       },
     },
+    "packages/effect-components": {
+      "name": "effect-components",
+      "version": "0.1.0",
+      "peerDependencies": {
+        "@types/react": "^19.0.0",
+        "effect": "^3.15.0",
+        "react": "^19.0.0",
+      },
+    },
     "packages/example": {
       "name": "@reffuse/example",
       "version": "0.0.0",
@@ -62,7 +71,7 @@
     },
     "packages/extension-query": {
       "name": "@reffuse/extension-query",
-      "version": "0.1.3",
+      "version": "0.1.5",
       "devDependencies": {
         "reffuse": "workspace:*",
       },
@@ -78,7 +87,7 @@
     },
     "packages/reffuse": {
       "name": "reffuse",
-      "version": "0.1.11",
+      "version": "0.1.13",
       "peerDependencies": {
         "@types/react": "^19.0.0",
         "effect": "^3.15.0",
@@ -573,6 +582,8 @@
 
     "effect": ["effect@3.15.1", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "fast-check": "^3.23.1" } }, "sha512-n3bDF6K3R+FSVuH+dSVU3ya2pI4Wt/tnKzum3DC/3b5e0E9HfhrhbkonOkYU3AVJJOzCA6zZE2/y6EUgQNAY4g=="],
 
+    "effect-components": ["effect-components@workspace:packages/effect-components"],
+
     "electron-to-chromium": ["electron-to-chromium@1.5.152", "", {}, "sha512-xBOfg/EBaIlVsHipHl2VdTPJRSvErNUaqW8ejTq5OlOlIYx1wOllCHsAvAIrr55jD1IYEfdR86miUEt8H5IeJg=="],
 
     "encodeurl": ["encodeurl@2.0.0", "", {}, "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="],
diff --git a/packages/example/src/routes/effect-component-tests.tsx b/packages/example/src/routes/effect-component-tests.tsx
index 7cfb033..38a21b2 100644
--- a/packages/example/src/routes/effect-component-tests.tsx
+++ b/packages/example/src/routes/effect-component-tests.tsx
@@ -1,6 +1,7 @@
 import { Box, Text, TextField } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Console, Effect, Layer, ManagedRuntime, Runtime } from "effect"
+import { ReactComponent } from "effect-components"
 import * as React from "react"
 
 
@@ -11,25 +12,15 @@ export const Route = createFileRoute("/effect-component-tests")({
 function RouteComponent() {
     const runtime = React.useMemo(() => ManagedRuntime.make(Layer.empty), [])
 
-    return runtime.runSync(Effect.gen(function* RouteComponent() {
-        const MyTest = yield* useFunctionComponent(MyTestComponent)
-
-        return <>
-            <MyTest />
-        </>
-    }))
+    return <>
+        {runtime.runSync(MyTestComponent.use(Component => (
+            <Component />
+        )))}
+    </>
 }
 
 
-const useFunctionComponent = <P, E, R>(
-    self: (props: P) => Effect.Effect<React.ReactNode, E, R>
-): Effect.Effect<React.FC<P>, never, R> => Effect.gen(function* useFunctionComponent() {
-    const runtime = yield* Effect.runtime<R>()
-    return React.useCallback((props: P) => Runtime.runSync(runtime)(self(props)), [runtime])
-})
-
-
-const MyTestComponent = Effect.fn(function*(props?: { readonly value?: string }) {
+const MyTestComponent = ReactComponent.make(Effect.fn(function* MyTestComponent(props?: { readonly value?: string }) {
     const [state, setState] = React.useState("value")
     const effectValue = yield* Effect.succeed(`state: ${ state }`)
 
@@ -45,7 +36,7 @@ const MyTestComponent = Effect.fn(function*(props?: { readonly value?: string })
             />
         </Box>
     </>
-})
+}))
 
 
 const useEffect = <A, E, R>(