Integration with React

Deprecated: React APIs from mobx-view-model

Everything related to the React integration must be imported from mobx-view-model-react. Re-exports on the root mobx-view-model entry are deprecated and may be removed in a future major version.

Import path mobx-view-model-react

React integration APIs — withViewModel, useCreateViewModel, useViewModel, ViewModelsProvider, OnlyViewModel, and related types such as ViewModelProps — are published under the mobx-view-model-react subpath.

Keep importing view-model classes, stores, and global configuration from mobx-view-model:

import { ViewModelBase, ViewModelStoreBase, viewModelsConfig } from "mobx-view-model";
import { withViewModel, ViewModelProps } from "mobx-view-model-react";

The root mobx-view-model package still re-exports these symbols for backward compatibility, but that path is deprecated; use mobx-view-model-react for all React-related imports.

Integration consists of 2-3 steps.

1. Connect ViewModel with View

Your ViewModel should be connected to a React view component.
To achieve this you can use:

• withViewModel() HOC - recommended way
• useCreateViewModel() hook - simplest way, more performant in many cases

2. Render in React tree

use withViewModel() HOC

Then you should render the component returned from this function

import { ViewModelBase } from "mobx-view-model";
import { ViewModelProps, withViewModel } from "mobx-view-model-react";
import { observer } from "mobx-react-lite";

class YourComponentVM extends ViewModelBase {}

export interface YourComponentProps extends ViewModelProps<YourComponentVM> {
  yourProp?: string;
}

const YourComponent = withViewModel(
  YourComponentVM,
  ({ model, yourProp }: YourComponentProps) => {
    return <div>{model.id}</div>;
  },
);

const YourApp = () => {
  return (
    <YourComponent />
  )
}

use useCreateViewModel() hook

Then you should render your React components using this hook

import { ViewModelBase } from "mobx-view-model";
import { useCreateViewModel } from "mobx-view-model-react";
import { observer } from "mobx-react-lite";

class YourComponentVM extends ViewModelBase {}

const YourComponent = observer(() => {
  const model = useCreateViewModel(YourComponentVM);

  return (
    <div>
      {model.id}
    </div>
  )
})

const YourApp = () => {
  return (
    <YourComponent />
  )
}

3. [Optional] Use ViewModelStore

ViewModelStore is a powerful tool that allows you to look up and access your view model instances anywhere.
To use this store:

1. Create instance of ViewModelStore
2. Wrap your application into ViewModelsProvider Context Provider.

import { ViewModelStoreBase } from "mobx-view-model";
import { ViewModelsProvider } from "mobx-view-model-react";

const vmStore = new ViewModelStoreBase();

const YourApp = () => {
  return (
    <ViewModelsProvider value={vmStore}>
      ...
    </ViewModelsProvider>
  )
}

With this step you can use the useViewModel() hook with the first argument

isMounted state

This state is based on calling the mount() method, which is triggered inside the useCreateViewModel() hook or the store lifecycle.
Because of this, on the first render isMounted will be false, since mounting happens inside a useLayoutEffect/useEffect hook.

Do not calls mount(), unmount() manually

This methods already calling inside ViewModelStore base implementation or inside useCreateViewModel hook.