Command Palette

Search for a command to run...

Hectal
Phase 15Advanced16 of 28 in React

State Management at Scale

Sort state into its kinds, see where context stops scaling, and learn Zustand, Redux Toolkit, atoms, signals and state machines, and how to choose between them.

Small apps keep state in useState, lift it up, and pass it down, with context for the few values everybody needs. As an app grows, three problems appear: one context change re-renders half the screen, data from the server gets copied into state and goes stale, and nobody can say where a value lives. This phase fixes all three.

You'll first sort state into its kinds (UI, form, server, URL and global client state) and give each kind its proper home. Then you'll measure why a big context re-renders too much and build the fix yourself: an external store read with useSyncExternalStore and a selector. Every library in this phase is that same idea, polished: Zustand, Redux Toolkit, atoms (Jotai), signals, MobX and state machines (XState).

Every live example logs its renders, so you can count re-renders with your own eyes instead of trusting a benchmark. The last topic is a decision guide: which tool for which job, how TanStack Query and a small client store share the work, and how to migrate a real app one piece at a time.

0/6 · 0%
6 topics ~3 h 21 code blocks & diagrams
Start with the first topic
1
15.1

Kinds of State and Where Each Belongs

Not all state is the same: UI state, form state, server state, URL state and global client state each change for different reasons and each has a best home, so picking the right tool starts with naming the kind.

26 min 1 diagram 2 code practice

2
15.2

When Context Isn't Enough

Every component that reads a context re-renders whenever the context value changes, even if it uses only one small part of it; splitting contexts helps, and an external store read through useSyncExternalStore with a selector fixes it properly.

28 min 1 diagram 3 code practice

3
15.3

Zustand

Zustand is a tiny external store library: create makes a hook that holds state and actions together, components read slices with selectors and re-render only when their slice changes, and middleware adds saving to localStorage and Redux DevTools.

28 min 4 code practice

4
15.4

Redux with Redux Toolkit

Redux keeps app state in one store that changes only when you dispatch an action, which a pure reducer turns into the next state; Redux Toolkit is the official, modern way to write it, with slices, Immer, thunks, memoised selectors and RTK Query.

29 min 4 code practice

5
15.5

Atoms, Signals and Other Models

Besides one big store, state can be split into tiny independent atoms (Jotai, Recoil), tracked automatically with signals or observables (Preact Signals, MobX), or modelled as a state machine (XState); each model trades React's simple re-render rule for a different kind of precision.

29 min 3 code practice

6
15.6

Choosing a State Tool

Choose by the kind of state, not by fashion: local state and the URL first, a query cache for server data, context for rare global values, and a small store (Zustand, Redux Toolkit, Jotai) only for busy global client state, introduced and migrated one feature at a time.

26 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Your first Zustand store

Turn this counter into a Zustand store. Create useCounter with create from zustand, holding count (starting at 0) and two actions: inc (adds 1) and reset (back to 0).

Intermediate
2

Build an external store with selectors

Finish createStore so it returns getState, setState(update) (where update is a function from the old state to the changed fields, merged into a new state object) and subscribe(listener) (which returns an unsubscribe function).

Intermediate
3

A to-do list with Redux Toolkit

Write a todosSlice with createSlice (name todos, initial state { items: [] }) and two reducers: added(state, action) pushes { id, text: action.payload, done: false }, and toggled(state, action) flips done on the todo whose id is action.payload. Write them in the mutating style: Immer makes it safe.

Intermediate
4

A cart that survives reloads

Build useCart with Zustand and the persist middleware, saved under the localStorage key cart. The state has items (an array of product names), drawerOpen (a boolean, starts false) and actions add(name), clear() and toggleDrawer().

Advanced
5

Shop: server state in a query, client state in a store

Build a small shop that uses TanStack Query for the products and Zustand for the client state. fakeFetchProducts(category) is given: it logs GET <category> and resolves after 150 ms.

Advanced