Cratis Arc MVVM for React

Cratis Arc’s Model-View-ViewModel (MVVM) integration moves React screen behavior into a class while the component renders its state. Use it when coordinating commands, deriving display values, or responding to other features makes the JSX difficult to follow. Small screens can stay with React hooks; MVVM is optional.

A component wrapped with withViewModel() gets a view model whose state is made observable through MobX. Reads in the wrapped render determine which changes update the view. The instance survives re-renders, so it can hold the screen’s state without rebuilding its dependencies on each render. You can exercise that behavior separately from the component.

Adopt MVVM on one screen

Keep your existing Arc host and start with one component:

1. Configure TSyringe and decorator metadata so constructor dependencies can be resolved at runtime.
2. Add the MVVM context and ensure the component renders inside React Router. MVVM does not supply a router.
3. Bind a component to a view model, then move its behavior into the class. Keep observable reads inside the wrapped render, or pass plain values to child components.

The view model’s lifetime belongs to the mounted view, not to the whole application. Release subscriptions in detached() when it is disposed. With <Arc development>, ordinary unmounts skip that disposal; read the lifecycle contract before moving resource-owning behavior into a view model.

Add the integrations your screen needs

Topic	What it covers
Using a view model	Bind a component to a view model and drive it from there.
MVVM context	Place the providers and understand application-wide configuration.
TSyringe	Dependency injection for view models with TSyringe.
Browser	Save browser preferences and understand navigation callback limits.
Dialogs	Driving dialogs from a view model.
Identity	Accessing identity and user context in MVVM.
Messaging	Notify another feature and keep messages within the intended scope.

If you are new to the frontend integration, start with the React hooks to connect a command or query before deciding where its screen behavior should live.