effect-react-composition

Create atoms with Atom.make for base state, derive values with Atom.map, and define mutations with Atom.fn wrapping Effect generators. Components read atoms via useAtomValue and write via useAtomSet from @effect/atom-react, updating reactively across the tree.

Replace boolean configuration props with composition by exporting atomic sub-components from a namespace, such as UserForm.Frame, UserForm.NameField, and UserForm.SubmitButton. Compose specific variants like CreateUserForm and UpdateUserForm from these pieces instead of toggling flags.

Use Context for component-scoped state shared within a compound component tree, like Tabs or Composer state. Use Effect Atom for app-wide state that many unrelated components read or write, avoiding deep provider nesting.

Yes, use Atom.runtime with a service layer and Atom.family to create keyed async atoms. The runtime wraps results as AsyncResult, which components render with AsyncResult.matchWithWaiting to handle loading, error, defect, and success states explicitly.

Use useEffect only for synchronizing with external systems like WebSockets or DOM APIs and for subscription cleanup. For derived values, calculate during render or use useMemo; for resetting state on prop change, use the key prop instead.