---
title: MVVM with React
---


For most screens, the [React hooks](/arc/frontend/react/) keep state in the component and that's exactly
right. But as a screen's logic grows — orchestrating several commands, deriving display state, reacting
to navigation — that logic starts to crowd the markup. The **Model-View-ViewModel** approach moves it
into a dedicated view model class: the component renders, the view model decides. The result is logic
you can test and reuse independently of the JSX.

Reach for MVVM when a screen has substantial behavior; stay with plain hooks when it doesn't.

| Topic | What it covers |
| ------- | ----------- |
| [Using a view model](/arc/frontend/reactmvvm/using-view-model/) | Bind a component to a view model and drive it from there. |
| [MVVM context](/arc/frontend/reactmvvm/mvvm-context/) | How the MVVM context is established and resolved. |
| [TSyringe](/arc/frontend/reactmvvm/tsyringe/) | Dependency injection for view models with TSyringe. |
| [Browser](/arc/frontend/reactmvvm/browser/) | Working with browser APIs and navigation from a view model. |
| [Dialogs](/arc/frontend/reactmvvm/dialogs/) | Driving dialogs from a view model. |
| [Identity](/arc/frontend/reactmvvm/identity/) | Accessing identity and user context in MVVM. |
| [Messaging](/arc/frontend/reactmvvm/messaging/) | Messaging and communication patterns in MVVM. |

New to the frontend? Start with the [React hooks](/arc/frontend/react/) first — MVVM is the next step up,
not the starting point.