effect-react-vm

To separate business logic from React UI rendering, use a ViewModel pattern to ensure components only subscribe to and render UI-ready values. ViewModels handle formatting, transformation, and error-to-UI mapping, keeping components clean.

Effect manages reactive state for React by defining atoms inside Effect layers. This ensures consistent handling of VM lifecycles, resources, and derived state, bridging domain services into UI-ready atoms for components to consume.

The best way to handle async actions in a React ViewModel is using Atom.fn patterns for effectful actions. These patterns provide built-in waiting and results states, allowing you to drive UI state machines cleanly using Data.TaggedEnum.

Yes, you can test React ViewModels deterministically by mocking services at the Layer level. This testable reactive architecture isolates VM logic from the UI, ensuring formatting and transformation are validated independently.

This architecture specifically bridges domain services into UI-ready atoms using Effect and Effect-Atom. It requires VM layers created with Layer.effect and components rendering from atom values using the provided VMRuntime hook.

Mixing UI rendering with state management and business logic creates unmaintainable React apps. Moving this logic into a ViewModel built on Effect ensures components only render UI-ready values, preventing formatting and error mapping from cluttering the UI.