useViewModel hook

A hook that provides access to an already created ViewModel instance within a React component.

If you need to create instance of ViewModel

Please use the useCreateViewModel hook or the withViewModel HOC.

API Signature

function useViewModel<VM extends AnyViewModel>(): VM

function useViewModel<VM extends AnyViewModel>(vmLookup: ViewModelLookup<VM>): VM

Usage

1. Basic Usage

Requires withViewModel() HOC usage to access

Reference to the last created ViewModel instance based on the React tree.
Use a generic type (YourVM) to define the return type of the view model instance.

import { observer } from "mobx-react-lite";

export const YourComponent = observer(() => {
  const yourVM = useViewModel<YourVM>();
});

2. Precise search with ViewModelLookup

Requires ViewModelStore

This variant requires a connected ViewModelStore in your React application using the <ViewModelsProvider /> HOC.

Use the vmLookup argument to define a specific identifier for the returned ViewModel instance, and use the generic the same way as above.

import { observer } from "mobx-react-lite";

export const YourComponent = observer(() => {
  const yourVM = useViewModel<YourVM>('view-model-id');
});

3. Lookup by anchor component

When using anchors or connect(), pass the anchor component as lookup:

const Anchor = () => null;
const MainView = withViewModel(VM, View, { anchors: [Anchor] });

const Consumer = observer(() => {
  const model = useViewModel<VM>(Anchor); // same VM as MainView receives
  return <span>{model.id}</span>;
});

4. Lookup from lazy-loaded component

With react-simple-loadable or similar, use connect() to register the loadable as anchor. PageLazy is the loadable-wrapped Page; after Page.connect(PageLazy) the lazy chunk can access the VM via useViewModel(PageLazy):

// page.lazy.tsx
import { loadable } from 'react-simple-loadable';

export const PageLazy = loadable(
  () => import('./page').then((m) => m.Page),
  () => <div>Loading...</div>,
);

// page.tsx
import { PageLazy } from './page.lazy';

export const Page = withViewModel(PageVM, ({ model }) => (
  <div>
    <main>...</main>
  </div>
));
Page.connect(PageLazy);

// Some child inside the lazy chunk — uses the same VM
const model = useViewModel<PageVM>(PageLazy);