Stop 09 · State ManagementTopics · 7/7

MobX (optional)

In short

MobX takes a different approach: you change plain objects, and anything that uses them updates automatically. It's optional, but you may run into it in some company codebases.

A state management library based on observable state and automatic reactivity — when observable data changes, anything using it re-renders automatically.

The jaadu mascot taps one cell of a giant spreadsheet and glowing lines light up other cells.

Think of it like this

An Excel sheet with formulas

Change the marks in one cell and the total and percentage cells update by themselves. You never tell them to. In MobX, observable data is the cell, computed values are the formulas, and components re-render when something they read changes.

Watch it happen

Change data, the UI follows

Your code

CartStore

total getter

CartTotal

add("Notebook", 60)

1/5You call cart.add. It's an action, so MobX tracks the change.

The big ideas

What you need to know

Observable state

makeAutoObservable(this) turns a class's fields into observables that MobX tracks.

Computed values

Getters become computed values. They're cached and recalculated only when their inputs change.

Actions change state

Methods become actions, so changing data directly, like this.items.push(x), is allowed and tracked.

observer components

Wrap components in observer from mobx-react-lite so they re-render when the data they read changes.

See it in code

Walk through the code

tsx

1import { makeAutoObservable } from "mobx";2import { observer } from "mobx-react-lite";3 4class CartStore {5  items: { name: string; price: number }[] = [];6  constructor() { makeAutoObservable(this); }7  add(name: string, price: number) { this.items.push({ name, price }); }8  get total() { return this.items.reduce((sum, i) => sum + i.price, 0); }9}10 11export const cart = new CartStore();12 13export const CartTotal = observer(() => <p>Total: ₹{cart.total}</p>);14// Call cart.add("Notebook", 60) anywhere, and CartTotal updates

1/4makeAutoObservable turns fields into observables, methods into actions and getters into computed values.

No setter, no dispatch. cart.add pushes into a tracked array, total recalculates, and only observer components that read total re-render.

Save yourself the pain

Common mistakes

Oops

Forgetting to wrap a component in observer.

Do this instead

Without observer, the component tracks nothing and won't update when the store changes.

Oops

Copying values out of the store at the top of the file, like const { total } = cart.

Do this instead

Read store values inside the observer component while it renders, so MobX can track them.

Your mission

Rebuild the cart in MobX

~30 min

Quick check

A component reads cart.total but isn't wrapped in observer. You call cart.add(...). What happens?

Go deeper

1Read a small MobX example and compare its mental model to Redux's.
2Notice how much less explicit 'wiring' MobX needs compared to Redux.
3Treat this as optional exposure — Zustand and Redux Toolkit are far more common in job listings.