makeObservable and makeObservable

ReactMiddle~2 min read

What `makeObservable()` does

makeObservable(this, annotations) - makes a class instance's properties and methods observable, according to the given annotations.

You manually specify which fields and methods become:

observable - tracked for changes,
computed - calculated based on other observables,
action - change the state.

Example with `makeObservable`

javascript

import { makeObservable, observable, action, computed } from "mobx"

class Counter {
  count = 0

  constructor() {
    // manually declare what to observe
    makeObservable(this, {
      count: observable,
      increment: action,
      double: computed,
    })
  }

  get double() {
    return this.count * 2
  }

  increment() {
    this.count++
  }
}

const counter = new Counter()

Now:

count is a tracked value,
increment() is an "action",
double is a computed property.

Components wrapped in observer will automatically re-render if count changes.

Key points:

makeObservable() is an explicit description of reactive properties.
You need to specify annotations manually.
It fits when you need fine-grained control (for example, not all fields are observable).
It also works with inheritance (annotations from different classes can be combined).

What `makeAutoObservable()` does

makeAutoObservable(this) - automatically makes all of a class's properties and methods reactive, without explicitly listing annotations.

That is, MobX determines on its own what is:

observable (fields),
computed (getters),
action (methods).

Example with `makeAutoObservable`

javascript

import { makeAutoObservable } from "mobx"

class Counter {
  count = 0

  constructor() {
    makeAutoObservable(this) // everything is done automatically
  }

  get double() {
    return this.count * 2
  }

  increment() {
    this.count++
  }
}

const counter = new Counter()

Here MobX itself:

made count → observable,
double → computed,
increment() → action.

Why "auto"

MobX analyzes the class structure:

fields → observable,
getters → computed,
methods → action.

You do not need to specify anything manually. This is the most convenient way to create a store for most scenarios.

The difference between `makeObservable` and `makeAutoObservable`

Property	`makeObservable`	`makeAutoObservable`
Annotations	Specified manually	Determined automatically
Control	Full (flexibility)	Simplified (convenience)
Fits for	Complex, custom structures	Simple stores and UI state
Computed	Must be declared manually	Determined from getters
Actions	Specified manually	Marked automatically
Used more often	In large projects with type control	In most cases (UI / SPA)

Example of the difference

javascript

class UserStore {
  name = "Alex"
  age = 25

  constructor() {
    // makeObservable requires an explicit description
    makeObservable(this, {
      name: observable,
      age: observable,
      isAdult: computed,
      birthday: action,
    })
  }

  get isAdult() {
    return this.age >= 18
  }

  birthday() {
    this.age++
  }
}

The same thing with makeAutoObservable:

javascript

class UserStore {
  name = "Alex"
  age = 25

  constructor() {
    makeAutoObservable(this)
  }

  get isAdult() {
    return this.age >= 18
  }

  birthday() {
    this.age++
  }
}

Both variants work the same way, but the second one is shorter, cleaner, and simpler.

When to use which

Scenario	What to choose
90% of cases - standard stores	`makeAutoObservable`
Need to exclude a field from observation	`makeObservable` (explicit control)
There are fields that don't need reactivity (for example, `timeoutId`, `config`)	`makeObservable`
Complex inheritance between store classes	`makeObservable`
Quickly create a store for the UI	`makeAutoObservable`

Combining them is possible

You can use makeAutoObservable, but still specify what should not be tracked:

javascript

class Store {
  id = Math.random()
  value = 0

  constructor() {
    makeAutoObservable(this, {
      id: false, // do not track this property
    })
  }

  increment() {
    this.value++
  }
}

SUMMARY

makeObservable(this, annotations) - manual setup of reactive properties. makeAutoObservable(this) - automatic reactivity "out of the box".

Function	What it does
`makeObservable`	manually declares observable, computed, and action
`makeAutoObservable`	automatically makes everything observable

Short Answer

Interview ready

Premium

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