{user.name}
+{user.email}
+Effect for React function components
-Write components as Effect programs.
-- effect-fc gives React 19 components access to Effect services, - scopes, subscriptions, and async workflows without giving up normal - React boundaries. -
-
-
- Get Started
-
-
- GitHub
-
+
-
-
+
+
+
+
+
+
+
+
+ Effect View for React 19
+
+ + React components, + powered by Effect. +
++ Bring typed services, scoped resources, reactive state, server + queries, and schema-driven forms into React without hiding either + framework. +
+ +
+
+ Start building
+
+
+
+ View on GitHub
+
+
+
+
+
+
+ npm install effect-view effect@beta
+
+
+
-
+ {componentExample}
+
+
+ UserCard.tsx
+ Effect + JSX
+
+
+ 01 Yield services
+ 02 Own the lifecycle
+ 03 Return JSX
+
+ Generator components
+
+
-
-
-
+
+
+ Why Effect View
+One model from render to resources.
- Use Component.make to yield Effects and return JSX
- from the same component body.
+ Effect View adds the pieces React deliberately leaves open while
+ preserving the React component model you already know.
Runtime at the edge
-
- Provide your app layer once with ReactRuntime.Provider
- and convert Effect-FC components at React boundaries.
-
Scoped lifecycles
-- Tie subscriptions and resources to component scopes so finalizers - run when React unmounts. -
-
+ {features.map((feature, index) => (
+
+
+
+ {feature.icon}
+
+ {String(index + 1).padStart(2, "0")}
+
+
+ {feature.title}
+{feature.description}
+
+
+
+ ))}
+ {feature.tag}
+
+
+
+
+
+ Read the guide
+
+ Ready when React is
+Start with one Effect component.
++ Add a runtime, cross the React boundary once, and grow into the + rest of the toolkit only when you need it. +
+