Observers

Observe field changes reactively using MobX observe(). Track value changes and trigger side effects — combined with autorun() for computed values.

🔗 Live Demo: Observers
📁 Source: FormObservers.tsx
📁 Setup: observers.ts

Concept

observe() fires after a value change has been committed to the store. It is a post-commit hook for reacting to what changed. Unlike interceptors, observers cannot modify or reject the incoming value — they are read-only listeners.

autorun() is a MobX utility that re-runs a function whenever any observable it depends on changes. It is ideal for deriving computed values from multiple fields.

Form Setup

The demo form defines four fields. Note that fullDisplay starts empty — it will be filled reactively by autorun():

const fields = {
  firstName: {
    value: 'Jane',
    label: 'First Name',
    placeholder: 'Enter first name',
    rules: 'required|string|min:2',
  },
  lastName: {
    value: 'Smith',
    label: 'Last Name',
    placeholder: 'Enter last name',
    rules: 'required|string|min:2',
  },
  fullDisplay: {
    value: '',
    label: 'Computed Display',
  },
  count: {
    value: 0,
    label: 'Change Count',
    rules: 'integer',
  },
};

Component Walkthrough

Observing individual fields

The demo registers an observe() on both firstName and lastName. Each observer pushes a log entry to React state with the new value and timestamp:

useEffect(() => {
  const firstName = form.$('firstName');
  const lastName = form.$('lastName');

  firstName.observe(({ change }) => {
    const entry = {
      field: 'firstName',
      value: change.newValue,
      time: new Date().toLocaleTimeString(),
    };
    setObservations((prev) => [entry, ...prev].slice(0, 15));
  });

  lastName.observe(({ change }) => {
    const entry = {
      field: 'lastName',
      value: change.newValue,
      time: new Date().toLocaleTimeString(),
    };
    setObservations((prev) => [entry, ...prev].slice(0, 15));
  });

  return () => {
    form.dispose();       // remove all observers
    autorunDisposer();    // remove the autorun
  };
}, [form]);

Computing a value with autorun()

A MobX autorun() observes both firstName and firstName.value and lastName.value. Whenever either changes, it:

1. Concatenates them into a fullName string
2. Sets the fullDisplay field with the result (or "(empty)" when both are blank)
3. Updates React component state to show the computed value in the UI:

const autorunDisposer = autorun(() => {
  const full = `${firstName.value} ${lastName.value}`.trim();
  form.$('fullDisplay').set(full || '(empty)');
  setComputed(full || '(empty)');
});

Because MobX tracks which observables are accessed inside the autorun(), it knows to re-run whenever firstName.value or lastName.value changes — no manual wiring needed.

Dual cleanup

The effect returns a cleanup function that calls both form.dispose() (to remove observers) and autorunDisposer() (to stop the autorun). This is important: form.dispose() cleans up MobX events registered through the form API, while autorunDisposer() is a raw MobX disposer returned by autorun().

Observe Log Panel

The observe log renders below the form fields, showing each change with timestamp and field name:

{observations.map((obs, i) => (
  <div key={i}>
    <span>{obs.time}</span>
    <span>{obs.field}</span>
    : <span class="text-green-600">{String(obs.value)}</span>
  </div>
))}

API Reference

field.observe(callback)

form.$('email').observe(({ form, field, change }) => {
  console.log(`${field.path} changed from "${change.oldValue}" to "${change.newValue}"`);
});

form.observe({ path, key, call })

form.observe({
  path: 'password',
  key: 'value',
  call: ({ change }) => {
    if (change.newValue.length > 0) {
      form.$('passwordStrength').set('medium');
    }
  },
});

Observing fields key

To observe the fields map itself (additions/removals of nested fields), use key: 'fields':

form.$('products').observe({
  key: 'fields',
  call: ({ change }) => {
    console.log('Products changed:', change.type); // "add", "delete", "update"
  },
});

Key Takeaways

1. Post-commit: Observers fire after the value is written — use them for logging, side effects, and reactions.
2. Read-only: You cannot modify or reject the change from within an observer.
3. Computed values: Use autorun() when you need to derive a value from multiple fields.
4. Dual cleanup: form.dispose() handles form-registered observers; autorunDisposer() handles raw MobX reactions.
5. Reactivity is automatic: MobX tracks all accessed observables inside autorun() — no subscriptions needed.