What is observable in MobX?

ReactJunior~2 min read

Simple definition

Observable is an observed value: an ordinary variable, object, or array wrapped in a change-tracking mechanism.

When an observable value changes, MobX automatically notifies every computation and component that uses it.

Think of observable as a "reactive cell" in Excel: if a formula (=A1 + A2) depends on cells A1 and A2, then when their values change, Excel recalculates the formula itself. MobX does the same thing with data and the UI.

Example 1 - a basic observable

javascript

import { makeObservable, observable, action } from 'mobx'

class Counter {
  count = 0

  constructor() {
    makeObservable(this, {
      count: observable, // an observable property
      increment: action,
    })
  }

  increment() {
    this.count++
  }
}

const counter = new Counter()

Now counter.count is observable. Any code (or component) that reads it automatically becomes dependent on it.

Example 2 - automatic tracking (observer)

javascript

import { observer } from 'mobx-react-lite'

const counter = new Counter()

const CounterView = observer(() => (
  <div>
    <p>{counter.count}</p>  {/* just reading the observable */}
    <button onClick={() => counter.increment()}>+</button>
  </div>
))

When counter.count changes, MobX:

detects that the CounterView component read count,
"remembers" that dependency,
re-renders only that component on the next change.

No useState, useEffect, subscribe - everything is "magically" reactive.

How it works under the hood

MobX creates a proxy wrapper around the value and tracks:

who reads the value (get);
who changes it (set).

When the observable is read, MobX records the active reaction (for example, a component). When the value updates, MobX notifies only the reactions that used it.

This mechanism is called fine-grained reactivity.

Example 3 - an object and arrays

javascript

import { observable } from 'mobx'

const state = observable({
  user: { name: 'Tim' },
  todos: [],
})

// automatic tracking
state.user.name = 'Alex'
state.todos.push({ text: 'learn MobX', done: false })

All nested fields inside observable() also become observable - MobX makes them reactive "recursively".

makeAutoObservable - the modern approach

Today makeAutoObservable() is used more often - it decides itself which fields should be observable, which computed, and which action:

javascript

import { makeAutoObservable } from 'mobx'

class TodoStore {
  todos = []

  constructor() {
    makeAutoObservable(this) // everything automatically becomes reactive
  }

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

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

MobX itself creates:

todos - observable (observable data);
completedCount - computed (a reactive derived value);
addTodo() - action (a controlled state change).

Types of observable in MobX

Type	What it does
`observable.box(value)`	a single observable value (a primitive)
`observable.object(obj)`	makes an object reactive
`observable.map()`	a reactive Map
`observable.array()`	a reactive array
`makeAutoObservable(this)`	automatically turns class properties into observables

Summary

Observable in MobX is "living" data that MobX watches. When it changes, everything that depends on it (components, computations, effects) updates automatically.

In short

Term	Role
observable	reactive state (data)
computed	derived values (depend on observables)
action	functions that change observables
observer	a wrapper component that automatically reacts to changes

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.