Domina MobX para Entrevistas Técnicas
Observables, computeds, actions, reactions, observer, makeAutoObservable, stores, React Context, testing, gotchas comunes y MobX vs Redux vs Zustand. 24 lecciones con un simulador del modelo reactivo que puedes editar y ejecutar.
- Paso 1
MobX 1: ¿Qué es MobX? El modelo de reactividad
**MobX is transparent functional reactive programming**. You declare state as observable, derivation...
Comenzar lección - Paso 2
MobX 2: observable y makeObservable
`observable` marks data reactive. For class-based stores, use **`makeObservable(this, { ... })`** to...
Comenzar lección - Paso 3
MobX 3: makeAutoObservable — el atajo
`makeAutoObservable(this)` infers annotations: **fields** become observable, **methods** become acti...
Comenzar lección - Paso 4
MobX 4: action — mutaciones atómicas de estado
`action` groups mutations into a single atomic transaction. Observers see the world only *after* the...
Comenzar lección - Paso 5
MobX 5: computed — derivaciones auto-memoizadas
`computed` turns a getter into a **memoized derivation**: runs once, caches result, re-runs only whe...
Comenzar lección - Paso 6
MobX 6: autorun — tu primera reacción
`autorun(fn)` runs `fn` once immediately, tracks every observable it reads, and re-runs `fn` wheneve...
Comenzar lección - Paso 7
MobX 7: reaction vs autorun vs when
**`autorun`** re-runs on *any* dep change. **`reaction(data, effect)`** decouples tracking from effe...
Comenzar lección - Paso 8
MobX 8: observable.box — observables primitivos
`observable.box<T>(initial)` wraps a **primitive** (string, number, boolean) into an observable cont...
Comenzar lección - Paso 9
MobX 9: Deep vs Shallow vs Ref
By default `observable` is **deep** — nested objects/arrays become observable too. Use `observable.s...
Comenzar lección - Paso 10
MobX 10: arrays, mapas y sets observables
MobX provides reactive **Arrays**, **Maps**, and **Sets** with the same API as their native counterp...
Comenzar lección - Paso 11
MobX 11: toJS — serializando observables
`toJS(obj)` recursively converts observable structures back to plain JS objects/arrays. Needed for J...
Comenzar lección - Paso 12
MobX 12: el grafo de derivaciones
Under the hood, MobX builds a **dependency graph**: observables → computeds → reactions. A write inv...
Comenzar lección - Paso 13
MobX 13: transacciones y batching
Mutations inside an action are **batched**: observers fire once at the end, not per mutation. This i...
Comenzar lección - Paso 14
MobX 14: configure — modo estricto y ajustes
`configure` sets global MobX behavior: strictness, proxy policy, computed rules. In production apps,...
Comenzar lección - Paso 15
MobX 15: observer — el puente con React
`observer(Component)` from `mobx-react-lite` wraps a function component in a reaction. Every observa...
Comenzar lección - Paso 16
MobX 16: estado observable local vs global
Not every observable lives in a big store. **`useLocalObservable`** from mobx-react-lite creates a c...
Comenzar lección - Paso 17
MobX 17: patrón Provider + Context
For app-wide stores, use React Context to make them injectable. Components consume via a typed `useS...
Comenzar lección - Paso 18
MobX 18: formularios controlados con MobX
Forms are ideal for MobX: a single store holds field values + validation + submit state....
Comenzar lección - Paso 19
MobX 19: store de fetching asíncrono
Loading, data, and error — the three states of every async request. A store owns them and exposes co...
Comenzar lección - Paso 20
MobX 20: UI optimista al estilo useOptimistic con MobX
MobX is perfect for optimistic updates: mutate locally, send to server, rollback on failure....
Comenzar lección - Paso 21
MobX 21: re-renders granulares por fila en listas
A list of 1000 items where one changes should re-render only that one row. Key: wrap each row in `ob...
Comenzar lección - Paso 22
MobX 22: stores derivados — composición entre stores
A derived store reads from other stores to produce a combined view. Example: `CheckoutStore` that de...
Comenzar lección - Paso 23
MobX 23: inicialización lazy con onBecomeObserved
`onBecomeObserved` / `onBecomeUnobserved` fire when a specific observable starts/stops being watched...
Comenzar lección - Paso 24
MobX 24: disposers y limpieza en React
Reactions hold references. In React, create reactions in `useEffect` and **return the disposer** so ...
Comenzar lección - Paso 25
MobX 25: persistencia en localStorage vía autorun
Persist store state with one autorun: serialize on every change. Rehydrate once on boot....
Comenzar lección - Paso 26
MobX 26: búsqueda con debounce — MobX + React
Debouncing a query is a two-layer concern: store owns the query and results; UI owns the debounce ti...
Comenzar lección - Paso 27
MobX 27: store de paginación
Pagination needs page number + page size + total + fetched items. A small computed reveals last page...
Comenzar lección - Paso 28
MobX 28: scroll infinito
Instead of pages, append. `hasMore` boolean + `loadMore()` action + IntersectionObserver on a sentin...
Comenzar lección - Paso 29
MobX 29: wizard de formulario con validación por paso
Multi-step form: a `step` observable + computed validation per step....
Comenzar lección - Paso 30
MobX 30: pila de Deshacer/Rehacer
Keep a history of snapshots; push on each action, pop on undo....
Comenzar lección - Paso 31
MobX 31: servicio de notificaciones toast
A global `ToastStore` with an `observable.array`; push/auto-dismiss via setTimeout....
Comenzar lección - Paso 32
MobX 32: gestor de modales
Same pattern as toasts: a `ModalStore` owns `open: Modal | null` and `open()/close()` actions....
Comenzar lección - Paso 33
MobX 33: store de autenticación
Auth store with `user`, `loading`, and computed `isLoggedIn`....
Comenzar lección - Paso 34
MobX 34: estado tipo router con historial
Route is a store field. Back-forward is a stack. Integrates with URL via popstate....
Comenzar lección - Paso 35
MobX 35: selectores derivados (composición de computed)
Express domain queries as chained computeds; each layer is memoized independently....
Comenzar lección - Paso 36
MobX 36: igualdad estructural en computed
By default, computeds compare with `===`. `computed.struct` (or `comparer.structural`) does a deep e...
Comenzar lección - Paso 37
MobX 37: keepAlive en computed
By default, a computed with no observers is torn down and recomputed from scratch on next read. `kee...
Comenzar lección - Paso 38
MobX 38: spy() — el flujo de eventos de MobX
`spy(handler)` is a global event stream: every action, reaction, observable change emits an event. B...
Comenzar lección - Paso 39
MobX 39: trace() para depuración dirigida
`trace(store, 'field')` inside a reaction prints WHY the reaction re-fires. Invaluable for 'why is t...
Comenzar lección - Paso 40
MobX 40: alternativa a mobx-logger
Minimal pattern: an autorun spying on a store prints mutations to the console — poor man's devtools....
Comenzar lección - Paso 41
MobX 41: ejecutar múltiples stores en React
Pattern: one React Provider with a RootStore that contains all domain stores....
Comenzar lección - Paso 42
MobX 42: hook useStore tipado a medida
Strongly-typed `useStore()` avoids repetitive generics at call sites....
Comenzar lección - Paso 43
MobX 43: patrones de TypeScript con MobX
Annotate observables as typed class fields; let `makeAutoObservable` do the rest....
Comenzar lección - Paso 44
MobX 44: probando un store de forma aislada
MobX stores are POJO classes — test them with any runner. Fresh store per test....
Comenzar lección - Paso 45
MobX 45: probando componentes observer
Render an observer component with React Testing Library; mutate the store; assert new DOM....
Comenzar lección - Paso 46
MobX 46: Atoms — la primitiva de bajo nivel
`createAtom(name, onBecomeObserved?, onBecomeUnobserved?)` lets you build custom observables. Used i...
Comenzar lección - Paso 47
MobX 47: store de suscripción WebSocket
A store that lazy-connects on first read, disconnects when no observers remain....
Comenzar lección - Paso 48
MobX 48: flujos asíncronos con flow() y generadores
`flow(generatorFn)` lets you write async actions as generators: yield promises, no `runInAction` nee...
Comenzar lección - Paso 49
MobX 49: parámetros de action y logging
Actions can be named via `action('name', fn)` — names show up in devtools and spy events....
Comenzar lección - Paso 50
MobX 50: Error Boundary + observer
React Error Boundaries catch render errors. Combine with observer: a store error flows into a render...
Comenzar lección - Paso 51
MobX 51: DI con RootStore + separación por interfaces
Larger apps split stores into interfaces. RootStore holds concrete impls; tests swap with mocks....
Comenzar lección - Paso 52
MobX 52: entidades de dominio con métodos
Not every observable is a store. Entities (Todo, Message, Order) can carry their own methods....
Comenzar lección - Paso 53
MobX 53: checklist de rendimiento
(1) observer each row of a list. (2) computed for derived data. (3) action-wrap rapid mutations. (4)...
Comenzar lección - Paso 54
MobX 54: observable sobre POJOs vs clases
Classes shine for stores with methods/computeds. `observable({...})` fits lightweight state....
Comenzar lección - Paso 55
MobX 55: when() como Promise
`when(pred)` (without effect) returns a **Promise** that resolves when pred is true. Perfect for one...
Comenzar lección - Paso 56
MobX 56: MobX vs Redux cara a cara
Same counter, two approaches. Redux: actions + reducers + dispatch. MobX: observables + mutations + ...
Comenzar lección - Paso 57
MobX 57: MobX vs Zustand
Zustand: small, hooks-based, immutable. MobX: reactive, mutable, class-oriented....
Comenzar lección - Paso 58
MobX 58: trampa común — destructurar observables
`const { name } = store` **snapshots** — reactivity lost. Destructure inside render to keep tracking...
Comenzar lección - Paso 59
MobX 59: trampa común — pasar un primitivo a un hijo memoizado
Parent observer reads `store.n`, passes to child. Child is memoized. Parent re-renders on every `n` ...
Comenzar lección - Paso 60
MobX 60: mobx-react vs mobx-react-lite
mobx-react-lite = function components only, tiny (~8kb). mobx-react = lite + class-component HOCs + ...
Comenzar lección - Paso 61
MobX 61: Signals vs observables de MobX
Signals (Solid, Preact, Angular) and MobX observables share the 'reactive primitive' idea. MobX trac...
Comenzar lección - Paso 62
MobX 62: MobX-State-Tree (MST) — introducción breve
MST adds: typed snapshots, actions-only mutations, middleware, and time-travel. Heavier but more str...
Comenzar lección - Paso 63
MobX 63: escalando MobX en apps grandes
Rules of thumb at scale: one RootStore, per-feature subtrees, domain entities with methods, keep sid...
Comenzar lección - Paso 64
MobX 64: diseño de sistema — dashboard de e-commerce
Architect it live: Product catalog, Cart, Auth, Orders, UI state. Each is a store. Derivations link ...
Comenzar lección - Paso 65
MobX 65: capstone — TodoMVC edición entrevista
Full TodoMVC: todos with CRUD, filter, computed leftCount, persistence. Ship-ready patterns....
Comenzar lección