useCreateViewModel hook

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.

A hook that connects a ViewModel (or ViewModelSimple) to the React render tree, providing seamless MobX integration.
It is used inside the withViewModel() HOC.

API Signature

function useCreateViewModel<VM extends AnyViewModel>(
  ViewModelClass: Class<VM>,
  payload?: ViewModelPayload<VM>,
  config?: UseCreateViewModelConfig<VM>
): VM;

vmConfig.useReactIds

Optional flag on merged vmConfig (same shape as viewModelsConfig): when true, this hook always calls React useId() and passes the result into view-model id generation as renderId. The same switch exists on global viewModelsConfig.

SSR

Stable ids across server render and client hydration matter for SSR apps. Because useId() is matched between server and client for the same component tree, enabling useReactIds can help keep generated ViewModel ids consistent where you rely on that alignment.

Example

const model = useCreateViewModel(YourVM, payload, {
  vmConfig: { useReactIds: true },
});

vmConfig.suspendUntil

Same idea as suspendUntil on viewModelsConfig; set it on vmConfig here when you need it only for this hook (with a ViewModel, not ViewModelSimple). You may return nothing to skip waiting—see the main suspendUntil section.

Example

import { when } from 'mobx';

const model = useCreateViewModel(YourVM, payload, {
  vmConfig: {
    suspendUntil: (vm) => when(() => Boolean(vm.ctx)),
  },
});

Usage

1. Basic Usage (Default Configuration)

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

export const YourComponent = observer(() => {
  const model = useCreateViewModel(YourVM);
})

2. Usage with payload

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

export const YourComponent = observer(() => {
  const model = useCreateViewModel(YourVM, { userId: '1' });
})

3. Custom Configuration

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

export const YourComponent = observer(() => {
  const model = useCreateViewModel(YourVM, {}, {
    vmConfig: { useReactIds: false }, // optional: pass React useId into VM id generation (see #usereactids)
    // vmConfig: { suspendUntil: ... }, // see #suspenduntil
    ctx: {}, // internal object used as cache key source inside this hook
    factory: (config) => new config.VM(config), // factory method for creating VM instances
    generateId, // custom fn for generating ids for VM instances
    id, // unique id if you need to create 1 instance of your VM
    anchors: [], // additional components for useViewModel lookup
  });
})

Example:

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

class VM extends ViewModelBase {
  @observable
  accessor value = '';

  @action
  setValue = (value: string) => {
    this.value = value;
  }
}

export const YourComponent = observer(() => {
  const model = useCreateViewModel(VM)

  return (
    <div>
      <input value={model.value} onChange={e => model.setValue(e.target.value)} />
    </div>
  )
})