ViewModelSimple

ViewModelSimple is a minimal contract aligned with the ViewModel interface, designed for lightweight state management with MobX. It keeps reactive state initialization simple (for example, via makeAutoObservable) while still fitting the library lifecycle in React applications.

Reference to source code

When to Use

Use ViewModelSimple when:

1. You need direct control over MobX observability (e.g., using makeAutoObservable)
2. You prefer a simple, boilerplate-free class structure
3. Your view model does not require advanced features like viewModels access or complex lifecycle hooks.

Example

import { ViewModelSimple } from "mobx-view-model";
import { makeAutoObservable } from "mobx";

export class FruitViewModel implements ViewModelSimple {
  // Unique instance identifier
  id = crypto.randomUUID(); 

  // Observable state
  fruit = "apple";

  constructor() {
    // Initialize MobX observables
    makeAutoObservable(this);
  }

  // Example action
  setFruit(newFruit: string) {
    this.fruit = newFruit;
  }
}

defining id property is optional

If you do not define the id property, a random id will be generated from viewModelsConfig.generateId

Example without implementing any interface methods

import { ViewModelSimple } from "mobx-view-model";
import { makeAutoObservable } from "mobx";

export class FruitViewModel {
  // Observable state
  fruit = "apple";

  constructor() {
    // Initialize MobX observables
    makeAutoObservable(this);
  }

  // Example action
  setFruit(newFruit: string) {
    this.fruit = newFruit;
  }
}

implements ViewModelSimple was removed

Because TypeScript throws an error about not implementing at least one property or method of the ViewModelSimple interface.

Usage in React

Usage with withViewModel HOC

import { observer } from "mobx-react-lite";
import { withViewModel } from "mobx-view-model";
import { FruitViewModel } from "./model";

export const FruitComponent = withViewModel(FruitViewModel, ({ model }) => {
  return (
    <div>
      <p>Current fruit: {model.fruit}</p>
      <button onClick={() => model.setFruit("banana")}>
        Change to Banana
      </button>
    </div>
  );
});

Usage with useCreateViewModel hook

import { observer } from "mobx-react-lite";
import { useCreateViewModel } from "mobx-view-model";
import { FruitViewModel } from "./model";

export const FruitComponent = observer(() => {
  // Creates a single instance per component mount
  const vm = useCreateViewModel(FruitViewModel);

  return (
    <div>
      <p>Current fruit: {vm.fruit}</p>
      <button onClick={() => vm.setFruit("banana")}>
        Change to Banana
      </button>
    </div>
  );
});

Accessing Instances

To retrieve an existing instance elsewhere in your app:

1. Use the useViewModel hook.
2. Ensure the instance is registered in a ViewModelStore