Observables

Observables are reactive properties. `makeAutoObservable` marks fields, getters, and methods on a class or object so reads register dependencies and writes trigger updates.

					import { makeAutoObservable } from 'mobx';

class TodoStore {
  items = [];
  constructor() {
    makeAutoObservable(this);
  }
  get openCount() {
    return this.items.filter((t) => !t.done).length;
  }
}
				

Arrays and maps are deeply observable. Components wrapped in `observer` re-render only when observables they read during render change.

The trade-off is automatic tracking versus opaque dependency graphs and harder time-travel than event logs.

On interviews: what happens if you read state outside `observer` or without tracking.

Common pitfalls: spreading observables into plain objects (losing reactivity), decorating non-plain structures incorrectly, and mixing untracked mutations.

Checklist:

• makeAutoObservable / observable for models.
• Read observables inside observer render.
• Avoid replacing observable trees with clones blindly.
• Use MobX devtools in development.