useCreateViewModel hook

Creates a ViewModel (or ViewModelSimple) and ties its lifecycle to the Solid component (setup once, onCleanup for unmount).

Used inside withViewModel().

API Signature

function useCreateViewModel<VM extends AnyViewModel>(
  ViewModelClass: Class<VM>,
  payload?: VM["payload"] | (() => VM["payload"]),
  config?: UseCreateViewModelConfig<VM>,
): VM;

Payload may be a plain value or a Solid-friendly accessor () => payload (recommended when payload comes from reactive props).

Usage

1. Basic

import { useCreateViewModel } from "mobx-view-model-solid";

export const YourComponent = () => {
  const model = useCreateViewModel(YourVM);
  return <div>{model.id}</div>;
};

2. With payload

export const YourComponent = (props: { userId: string }) => {
  const model = useCreateViewModel(YourVM, () => ({ userId: props.userId }));
  return <div>{model.payload.userId}</div>;
};

3. Custom configuration

const model = useCreateViewModel(YourVM, {}, {
  vmConfig: {},
  ctx: {},
  factory: (config) => new config.VM(config),
  id: "fixed-id",
  anchors: [],
});

Full example

import { ViewModelBase } from "mobx-view-model";
import { useCreateViewModel } from "mobx-view-model-solid";
import { observable, action } from "mobx";

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

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

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

  return (
    <div>
      <input
        value={model.value}
        onInput={(e) => model.setValue(e.currentTarget.value)}
      />
    </div>
  );
};

Notes

• Ids use Solid createUniqueId() when config.id is omitted (stable across SSR hydration).
• In viewModelsConfig.mode === 'ssr', a thenable from mount() is registered as a Solid resource so <Suspense> can wait during server rendering.
• Call enableObservableTracking() once at the app entry before MobX observables are read; this hook does not enable tracking automatically. See the SolidJS integration guide.