Write React components as Effect programs.

The thesis

Two fibers, one component

React and Effect both schedule work on fibers. effract drives a component’s generator inside React’s render pass — one stream of yield* for both. 100% real React, no forked reconciler.

• yield* Stats a service, resolved synchronously
• yield* hook(useState(0)) a real React hook, stable order
• yield* fetchUser suspends, then resumes inline
• a failure throws to the nearest boundary

// Counter: a React component,
// written as an Effect program
const Counter = rec(function* () {
  const stats = yield* Stats
  const [n] = yield* hook(useState(0))
  return <Row n={n} of={stats.total}/>
})

// DI checked at compile time:
createRoot(el).render(
  mount(AppLive, Counter),
)

A service and a real React hook in one body — checked at compile time.