Observables, Computed Values & Reactions

Mutable State, Automatic Reactivity

MobX takes a different philosophy from Redux: instead of immutable state updated through pure reducers, MobX embraces mutable observable state with automatic dependency tracking — mutate it directly, and anything that read it automatically updates.

makeAutoObservable

class TodoStore {
  todos: Todo[] = []

  constructor() {
    makeAutoObservable(this)
  }

  get completedCount() {
    return this.todos.filter((t) => t.done).length
  }

  addTodo(text: string) {
    this.todos.push({ text, done: false })
  }
}

makeAutoObservable inspects the class and infers sensible defaults: fields become observable, getters (completedCount) become computed, methods become actions — cutting the manual per-field decorator boilerplate older MobX required.

Computed — Memoized Derivations

completedCount is a computed value: MobX tracks exactly which observables it reads (todos) and only re-evaluates it when one of those specific observables actually changes, reusing the cached result otherwise.

Reactions: autorun

autorun(() => {
  console.log(`Completed: ${store.completedCount}`)
})
// re-runs automatically whenever completedCount's dependencies change

autorun automatically tracks which observables were read during its last run and re-executes whenever any of them change — the same mechanism, via the observer HOC, that drives React component re-renders.