React MVVM

Transform your React development with clean MVVM architecture and MobX state management

React MVVM is a library which simplifies the usage of MobX with React by applying MVVM pattern. With this package you can create views and view models and keep the logic and presentation separately.

The library allows you to form a strict approach to development, as well as simplify the development process by taking into account the proposed approach.

Effortlessly Simple

Master React MVVM in minutes, not hours. With just 2 functions and 1 abstract class, you'll be building better apps immediately.

TypeScript First

Built for modern development. Enjoy full TypeScript support with intelligent autocomplete, type safety, and enhanced developer experience.

Lightweight

The size of the library is less than 1.6 Kb.

Easy to extend

The library allows you to create easily extensible and scalable applications.

Achieve perfect separation of concerns - keep your business logic clean and your UI focused


import { action, makeObservable, observable } from 'mobx';
import { view, ViewModel, configure } from 'react-mvvm';

configure({
  vmFactory: VM => {
    const viewModel = new VM();
    makeObservable(viewModel);
    return viewModel;
  },
});

class CounterViewModel extends ViewModel {
  @observable counter = 0;

  @action increase = () => {
    this.counter++;
  }
}

const Counter = view(CounterViewModel)(({ viewModel }) => (
  <div>
    <span>Counter: {viewModel.counter}</span>
    <button onClick={() => viewModel.increase()}>Update</button>
  </div>
))

Replace complex Context API patterns with elegant, type-safe view models


import React, { FC } from 'react';
import { view, childView } from 'react-mvvm';
import { SomeViewModel } from './path-to-view-model';

const SomeChildView = childView<SomeViewModel>()(({ viewModel }) => (
  <div>
    {/* You can use view models as context at any depth level inside a view */}
    <span>Counter: {viewModel.counter}</span>

    {/* You can also use view's props with a viewModel object, so there's no need to drill them */}
    <span>{viewModel.viewProps.prop1}</span>
  </div>
));

type Props = {
  prop1: number;
};

const SomeView = view(SomeViewModel)<Props>(({ viewModel, prop1 }) => (
  <div>
    {/* You can use view models as context */}
    <span>Counter: {viewModel.counter}</span>
    <span>Sum: {viewModel.counter + prop1}</span>
    <button onClick={() => viewModel.increase()}>Update</button>
    <SomeChildView />
  </div>
))

Eliminate hook complexity and embrace declarative component architecture


import { view, ViewModel } from 'react-mvvm';
import { AnyMemoizedComponent } from './AnyMemoizedComponent';

class SomeViewModel extends ViewModel {
  // Can be used instead of useLayoutEffect(() => { ... }, []);
  protected onViewMountedSync() { }

  // Can be used instead of useEffect(() => { ... }, []);
  protected onViewUnmounted() { }

  // Can be used partially instead of useEffect(() => { ... });
  protected onViewUpdated() { }

  // Any function that created in a ViewModel is memoized,
  // so you don't need to use useMemo or useCallback
  handleClick = () => { ... };
}

const SomeView = view(SomeViewModel)(({ viewModel }) => (
  <div>
    Thus, the view can start to consist exclusively of JSX code
    <AnyMemoizedComponent onClick={viewModel.handleClick} />
  </div>
));

It's very flexible!

React MVVM depends on several packages, but you are free to choose any recent version of these packages.

For react the available versions are 16, 17, 18 and 19.

For mobx-react the available versions are 6 and 7.

For mobx-react-lite the available versions are 3 and 4 (recommended for most cases).

For mobx the available versions are 4, 5 and 6. But, please, see the Getting started section before using the 4^th or 5^th versions.

Ready to Transform Your Development?

Explore our comprehensive example gallery and discover real-world patterns that will accelerate your next project!

Start Building