Computed values

Computed values cache derived data and recompute only when observed dependencies change — MobX's answer to memoized selectors. Define them as getters on observable models or with `computed()`.

					class Cart {
  items = [];
  constructor() {
    makeAutoObservable(this);
  }
  get total() {
    return this.items.reduce((sum, i) => sum + i.price * i.qty, 0);
  }
}
				

Computed values must stay pure (no side effects). They lazily evaluate: if nothing reads `total`, work is skipped.

The trade-off is cached derived values without manual duplication versus recomputation when dependencies are broad.

On interviews: computed vs storing `total` as a field updated in every action.

Common pitfalls: side effects inside getters, circular computed dependencies, and expensive computeds read by huge observer trees.

Checklist:

• Pure derivation in getters/computed.
• Prefer computed over manual sync fields.
• Keep computeds cheap or partition data.
• Test computeds as functions of observables.