State management libraries

One cart that half the shop needs

A shop's cart shows up all over the page: a count in the header, Add buttons in the product list, a gift note, and a total. Here is that cart with React's own tools: state in a CartProvider, shared through a context, as in Scaling up with a reducer and context. Each box has a small counter from the RenderCount.jsx tab, as in When React re-renders: it shows how many times React rendered that component.

1import { createContext, useContext, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const teas = [5  { id: "green", name: "Green tea", price: 3 },6  { id: "mint", name: "Mint tea", price: 4 },7  { id: "chai", name: "Chai", price: 5 },8];9 10const CartContext = createContext(null);11 12function CartProvider({ children }) {13  const [items, setItems] = useState([]);14  const [note, setNote] = useState("");15  const add = (tea) => setItems([...items, tea]);16  return (17    <CartContext value={{ items, note, add, setNote }}>18      {children}19    </CartContext>20  );21}22 23function CartBadge() {24  const count = useContext(CartContext).items.length;25  return <p className="box">Cart: {count} <RenderCount /></p>;26}27 28function ProductList() {29  const { add } = useContext(CartContext);30  return (31    <div className="box">32      {teas.map((tea) => (33        <button key={tea.id} onClick={() => add(tea)}>Add {tea.name}</button>34      ))}35      <RenderCount />36    </div>37  );38}39 40function GiftNote() {41  const { note, setNote } = useContext(CartContext);42  return (43    <p className="box">44      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />45      <RenderCount />46    </p>47  );48}49 50function CartTotal() {51  const { items } = useContext(CartContext);52  const total = items.reduce((sum, tea) => sum + tea.price, 0);53  return <p className="box">Total: ${total} <RenderCount /></p>;54}55 56export default function App() {57  return (58    <CartProvider>59      <CartBadge />60      <ProductList />61      <GiftNote />62      <CartTotal />63    </CartProvider>64  );65}

CartProvider on lines 12 to 21 keeps the items and the note in state (lines 13 and 14), and line 17 passes them, with the add and setNote functions, as one value. Each of the four components reads what it needs with useContext: the badge counts the items on line 24, and the total adds up their prices on line 52.

Click Add Green tea and Add Chai. The badge says Cart: 2, the total Total: $8, and they agree. React's built-in tools did the job. Now type Hi in the gift note and watch the counters: all four go up with each letter, even the badge and the total, which show nothing about the note. That's the question of this lesson: when is React's own state enough, and when does a state management library help?

Before you can answer that, it helps to see that an app keeps several kinds of state, and each has its own best home. Only one of them is a job for a state library.

Sort your state before you pick a tool

Client state is data that only this page has, like what you've typed or what's in your cart before checkout. Server state is a copy of data a server owns, like products and stock: it needs loading, can go out of date, and other people change it. The Data fetching libraries lesson showed why server state belongs in a cache like TanStack Query's. The address is a third kind, and Routing showed how it decides the page and keeps options like a sort order.

How to read the table: each row is one kind of state, an example from the shop, and the tool that fits it.

Read the table from the top: each row is a step to take only when the one above it stops fitting. Most state is one component's, and useState is all it needs. When two components need it, lift it up. When many components far apart need it, use a context. When updates get complicated, add a reducer.

Large older React apps often put everything in one global store, including the server's data, with code to fetch it, save it, and track loading. Once server data moves to a data library and the page's options move to the URL, the shared client state that's left is usually small: a cart, a few settings, open panels. Start there, and the question becomes "is context enough for this?"

When context isn't enough

Go back to the context cart and type in the gift note. Every key renders all four components. A context has one value: here, the object on line 17, made new on each render of CartProvider. When it changes, React renders every component that reads the context. It doesn't look at which part of the value each one used.

For a small page that's fine: rendering four small components is quick. It starts to cost when many components read a context that changes often, like a large cart page where each of 50 rows reads the cart and you type in a note. Within React, you can:

• Split the context. Put the functions in a context of their own, as the reducer-and-context lesson did with dispatch, and give the note a context too. Each new piece of state needs another context and another provider.
• Memoize below the readers. A component that reads the context still renders, but memo can stop the components under it from rendering.
• Use a store with selectors. A store holds the state outside React. A selector is a small function that picks the part a component needs, like (state) => state.items.length. The component renders only when its selector's answer changes.

The last one is the store you built in Subscribing to external stores. Here is the same cart on that store.js, unchanged (open its tab):

1import { createStore, useStore } from "./store.js";2import RenderCount from "./RenderCount.jsx";3 4const teas = [5  { id: "green", name: "Green tea", price: 3 },6  { id: "mint", name: "Mint tea", price: 4 },7  { id: "chai", name: "Chai", price: 5 },8];9 10const cartStore = createStore({ items: [], note: "" });11 12function add(tea) {13  const state = cartStore.getState();14  cartStore.setState({ ...state, items: [...state.items, tea] });15}16 17function setNote(note) {18  cartStore.setState({ ...cartStore.getState(), note });19}20 21function CartBadge() {22  const count = useStore(cartStore, (state) => state.items.length);23  return <p className="box">Cart: {count} <RenderCount /></p>;24}25 26function ProductList() {27  // Reads nothing from the store, so the store never renders it.28  return (29    <div className="box">30      {teas.map((tea) => (31        <button key={tea.id} onClick={() => add(tea)}>Add {tea.name}</button>32      ))}33      <RenderCount />34    </div>35  );36}37 38function GiftNote() {39  const note = useStore(cartStore, (state) => state.note);40  return (41    <p className="box">42      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />43      <RenderCount />44    </p>45  );46}47 48function CartTotal() {49  const total = useStore(cartStore, (state) =>50    state.items.reduce((sum, tea) => sum + tea.price, 0),51  );52  return <p className="box">Total: ${total} <RenderCount /></p>;53}54 55export default function App() {56  return (57    <>58      <CartBadge />59      <ProductList />60      <GiftNote />61      <CartTotal />62    </>63  );64}

Line 10 makes one store for the cart, outside any component. add and setNote on lines 12 to 19 are plain functions that make a new state and call setState. Each component reads its part with a selector: the count on line 22, the note on line 39, the total on lines 49 to 51. ProductList reads nothing at all: it only calls add.

Type Hi in the gift note: only GiftNote's counter goes up. Click Add Green tea: the badge and the total go up, and the list and the note stay. useSyncExternalStore runs each selector after every change and renders a component only if its answer is different. Try both on the two versions side by side:

Rendering too much is one reason to reach for a store. These are others, and any one of them can be enough:

• Code outside React changes the state. A websocket message, a timer, or a checkout function that isn't a component can change a store directly; a context can only change inside React.
• Many pieces of state depend on each other, and you'd like the rules in one place, with tools to see each change.
• The state should be saved to the browser and come back, or be shared between tabs.
• A team wants one way to write shared state across a big app.

Your own store covers the first reason in 23 lines. Libraries add the rest, tested by many apps. Here are three popular ones, with the same cart.

Zustand: one store and a hook

Zustand (German for "state", version 5.0.16 here) is a small library that gives you a store like yours, and a hook to read it with selectors. The versions in this lesson were the latest in October 2026. In a project you install each library with npm:

npm install zustand
npm install @reduxjs/toolkit react-redux
npm install jotai

1import { create } from "zustand@5.0.16?dev&deps=react@19.3.1,react-dom@19.3.1";2import RenderCount from "./RenderCount.jsx";3 4const teas = [5  { id: "green", name: "Green tea", price: 3 },6  { id: "mint", name: "Mint tea", price: 4 },7  { id: "chai", name: "Chai", price: 5 },8];9 10const useCart = create((set) => ({11  items: [],12  note: "",13  add: (tea) => set((state) => ({ items: [...state.items, tea] })),14  setNote: (note) => set({ note }),15}));16 17function CartBadge() {18  const count = useCart((state) => state.items.length);19  return <p className="box">Cart: {count} <RenderCount /></p>;20}21 22function ProductList() {23  const add = useCart((state) => state.add);24  return (25    <div className="box">26      {teas.map((tea) => (27        <button key={tea.id} onClick={() => add(tea)}>Add {tea.name}</button>28      ))}29      <RenderCount />30    </div>31  );32}33 34function GiftNote() {35  const note = useCart((state) => state.note);36  const setNote = useCart((state) => state.setNote);37  return (38    <p className="box">39      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />40      <RenderCount />41    </p>42  );43}44 45function CartTotal() {46  const total = useCart((state) =>47    state.items.reduce((sum, tea) => sum + tea.price, 0),48  );49  return <p className="box">Total: ${total} <RenderCount /></p>;50}51 52export default function App() {53  return (54    <>55      <CartBadge />56      <ProductList />57      <GiftNote />58      <CartTotal />59    </>60  );61}

Lines 10 to 15 are the whole store. create takes a function that gets set and returns the starting state: the data (items, note) and the functions that change it (add, setNote), in one object. set merges what you give it into the state, so line 14 changes only note. Line 13 passes set a function, to build the new items from the current state, like an updater function in useState.

create returns a hook, useCart. Each component calls it with a selector: the count on line 18, the add function on line 23, the note and setNote on lines 35 and 36. There's no provider: the store lives in the module, like cartStore did. Type in the note and add teas: the counters move exactly as they did with your own store, because Zustand's hook is built on useSyncExternalStore too.

The import on line 1 names a version and adds ?dev&deps=react@19.3.1,react-dom@19.3.1, so the live result loads the library's development build, made for the same React the result uses. In a project you write from "zustand".

One rule matters with every selector, in all three libraries: return a value that stays the same while the state does. A selector that builds a new object every time gives a "new" answer on every read, and React renders again forever:

import { useShallow } from "zustand/react/shallow";

// A new object every time: React sees a change on every read.
const { count, note } = useCart((state) => ({ count: state.items.length, note: state.note }));

// useShallow compares the object's values instead, so equal values count as no change.
const { count, note } = useCart(
  useShallow((state) => ({ count: state.items.length, note: state.note })),
);

Line 4 makes a new { count, note } object on each call, so React warns The result of getSnapshot should be cached to avoid an infinite loop and stops with Maximum update depth exceeded. Lines 7 to 9 wrap the same selector in useShallow, which compares the object's values instead of the object, so equal values count as no change. Or call the hook twice, once per value, as GiftNote does.

Redux Toolkit: actions, reducers, and one store

Redux is the oldest of the three, and the one you'll meet in many existing apps. Its rule: state changes only through actions, plain objects that say what happened, and a reducer turns the current state and an action into the next state. That's the pattern from Extracting state logic into a reducer, for a whole app; the JavaScript course's State management lesson builds it without React. Redux Toolkit (2.13.0) is the official way to write Redux today, and React Redux (9.3.0) connects it to components.

1import { configureStore, createSlice } from "@reduxjs/toolkit@2.13.0?dev&deps=react@19.3.1,react-dom@19.3.1";2import { Provider, useDispatch, useSelector } from "react-redux@9.3.0?dev&deps=react@19.3.1,react-dom@19.3.1";3import RenderCount from "./RenderCount.jsx";4 5const teas = [6  { id: "green", name: "Green tea", price: 3 },7  { id: "mint", name: "Mint tea", price: 4 },8  { id: "chai", name: "Chai", price: 5 },9];10 11const cartSlice = createSlice({12  name: "cart",13  initialState: { items: [], note: "" },14  reducers: {15    added(state, action) {16      state.items.push(action.payload);17    },18    noteChanged(state, action) {19      state.note = action.payload;20    },21  },22});23const { added, noteChanged } = cartSlice.actions;24const store = configureStore({ reducer: { cart: cartSlice.reducer } });25 26function CartBadge() {27  const count = useSelector((state) => state.cart.items.length);28  return <p className="box">Cart: {count} <RenderCount /></p>;29}30 31function ProductList() {32  const dispatch = useDispatch();33  return (34    <div className="box">35      {teas.map((tea) => (36        <button key={tea.id} onClick={() => dispatch(added(tea))}>Add {tea.name}</button>37      ))}38      <RenderCount />39    </div>40  );41}42 43function GiftNote() {44  const note = useSelector((state) => state.cart.note);45  const dispatch = useDispatch();46  return (47    <p className="box">48      <input placeholder="Gift note" value={note} onChange={(event) => dispatch(noteChanged(event.target.value))} />49      <RenderCount />50    </p>51  );52}53 54function CartTotal() {55  const total = useSelector((state) =>56    state.cart.items.reduce((sum, tea) => sum + tea.price, 0),57  );58  return <p className="box">Total: ${total} <RenderCount /></p>;59}60 61export default function App() {62  return (63    <Provider store={store}>64      <CartBadge />65      <ProductList />66      <GiftNote />67      <CartTotal />68    </Provider>69  );70}

createSlice on lines 11 to 22 makes a slice: one part of the store, with its name, its starting state, and its reducers. Each reducer on lines 15 to 20 handles one action. Line 16 pushes into state.items, which looks like changing state in place, which React state forbids. It's safe here because createSlice runs reducers with Immer: state is a draft, and Immer turns your changes into a new state object, as in Updating objects in state.

Line 23 takes the action creators, functions that build actions, from the slice. Line 24 makes the store with configureStore, and line 63 gives it to every component with <Provider store={store}>. Components read with useSelector (lines 27, 44, 55) and change things with dispatch from useDispatch: line 36 dispatches added(tea). Here is what that action looks like:

console.log(added({ id: "green", name: "Green tea", price: 3 }));
// { type: "cart/added", payload: { id: "green", name: "Green tea", price: 3 } }

Line 1 calls the action creator, and line 2 is what it returns: a type, made from the slice's name and the reducer's, and a payload, the tea. Every change in the app takes the same road:

Try the counters: they move exactly as with Zustand. Redux costs more code: 14 lines set up the cart here, against 6 in Zustand, plus the Provider. What the code buys is one strict pattern. Every change is an action you can log, so the Redux DevTools browser extension can list every action and step back through them ("time travel"). Redux Toolkit also includes RTK Query, a data library like TanStack Query, for server state.

Jotai: state in small atoms

Jotai (Japanese for "state", 3.0.1 here) starts from the other end. Instead of one store object, you make many small pieces of state called atoms, and read each one like a useState that any component can share.

1import { atom, useAtom, useAtomValue, useSetAtom } from "jotai@3.0.1?dev&deps=react@19.3.1,react-dom@19.3.1";2import RenderCount from "./RenderCount.jsx";3 4const teas = [5  { id: "green", name: "Green tea", price: 3 },6  { id: "mint", name: "Mint tea", price: 4 },7  { id: "chai", name: "Chai", price: 5 },8];9 10const itemsAtom = atom([]);11const noteAtom = atom("");12const countAtom = atom((get) => get(itemsAtom).length);13const totalAtom = atom((get) =>14  get(itemsAtom).reduce((sum, tea) => sum + tea.price, 0),15);16 17function CartBadge() {18  const count = useAtomValue(countAtom);19  return <p className="box">Cart: {count} <RenderCount /></p>;20}21 22function ProductList() {23  const setItems = useSetAtom(itemsAtom);24  return (25    <div className="box">26      {teas.map((tea) => (27        <button key={tea.id} onClick={() => setItems((items) => [...items, tea])}>Add {tea.name}</button>28      ))}29      <RenderCount />30    </div>31  );32}33 34function GiftNote() {35  const [note, setNote] = useAtom(noteAtom);36  return (37    <p className="box">38      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />39      <RenderCount />40    </p>41  );42}43 44function CartTotal() {45  const total = useAtomValue(totalAtom);46  return <p className="box">Total: ${total} <RenderCount /></p>;47}48 49export default function App() {50  return (51    <>52      <CartBadge />53      <ProductList />54      <GiftNote />55      <CartTotal />56    </>57  );58}

Lines 10 and 11 make two atoms with starting values: the items and the note. Lines 12 to 15 make two derived atoms: an atom made with a function works its value out from other atoms, read with get. Jotai remembers what each one read, so when itemsAtom changes, it works countAtom and totalAtom out again.

useAtomValue reads an atom (lines 18 and 45), useSetAtom gives only its setter (line 23), and useAtom gives both, like useState (line 35). Line 27 sets the items with an updater function. There's no provider: atoms live in a default store until you add a <Provider> for a separate one. The counters move exactly as before: a component renders only when an atom it reads has a new value.

Choosing a library, or none

All three fixed the same problem the same way: components read a part of the state, and render only when that part changes. They differ in the shape they give your state:

How to read the table: each row asks one question about the same cart, in each library.

A short way to choose:

1. Sort the state first. Server data goes to a data library, the page's options go to the URL, and one component's state stays there.
2. Try React's tools for what's left. Lifted state and context are enough when few components read the value or it rarely changes, like a signed-in user or a theme.
3. Pick a library when the signs show up: many readers of state that changes often, changes from outside React, or state you want saved. Zustand when you want one small store, Redux Toolkit when a team wants one strict pattern and its tools, Jotai when the state is many small pieces with values worked out from others.
4. In an existing app, use what it has. Two state libraries in one app are harder to follow than either one.

Zustand and Jotai are small libraries; Redux Toolkit with React Redux is bigger, and brings more. All three support React 19 and TypeScript.

A cart that survives a refresh

Two of the reasons for a store show up in almost every shop: the cart should still be there after a refresh, and code that isn't a component should be able to change it. Here is a cart on Zustand that does both, with its persist middleware. Middleware wraps a store to add a feature; persist saves the state to localStorage on every change and reads it back when the store is made.

1import { create } from "zustand@5.0.16?dev&deps=react@19.3.1,react-dom@19.3.1";2import { persist } from "zustand@5.0.16/middleware?dev&deps=react@19.3.1,react-dom@19.3.1";3import { sendOrder } from "./api.js";4 5const teas = [6  { id: "green", name: "Green tea", price: 3 },7  { id: "mint", name: "Mint tea", price: 4 },8  { id: "chai", name: "Chai", price: 5 },9];10 11const useCart = create(12  persist(13    (set) => ({14      items: [],15      add: (tea) => set((state) => ({ items: [...state.items, tea] })),16      clear: () => set({ items: [] }),17    }),18    { name: "cart" },19  ),20);21 22// Plain JavaScript, outside any component: it reads and changes the store directly.23async function checkout() {24  await sendOrder(useCart.getState().items);25  useCart.getState().clear();26}27 28export default function App() {29  const items = useCart((state) => state.items);30  const add = useCart((state) => state.add);31  return (32    <>33      {teas.map((tea) => (34        <button key={tea.id} onClick={() => add(tea)}>Add {tea.name}</button>35      ))}36      <p>In your cart: {items.map((tea) => tea.name).join(", ") || "nothing yet"}</p>37      <button onClick={checkout} disabled={items.length === 0}>Place order</button>38    </>39  );40}

Lines 11 to 20 make the store: line 12 wraps its function in persist, and line 18 names the saved entry "cart". checkout on lines 23 to 26 is plain JavaScript, not a component and not a hook: it reads the items with useCart.getState(), sends them to the pretend server in the api.js tab, then calls clear. Every component that reads the items renders with the empty cart.

Add two teas, then press Run again, which starts the result over like a refresh. The cart still lists them: line 12 read them back from localStorage. Press Place order: the console says Order sent: 2 teas, and half a second later the cart is empty.

Common mix-ups

• "Every React app needs a state library." No. Many apps need none: their state fits in components, the URL, a data library, and a context or two.
• "Put the server's data in the store." No. A copy of server data needs loading, refreshing, and sharing between requests. A data library does that; a store would only hold an old copy.
• "Context is a state management library." Not quite. Context passes a value down the tree. The state lives in useState or useReducer, and every reader renders when the value changes.
• "Context is slow, so avoid it." No. For values that rarely change, like a theme, it's the right tool. It costs only when many readers sit under a value that changes often.
• "Redux is outdated." No. Redux Toolkit is maintained and widely used. It has more code than the others, in exchange for one strict pattern and its tools.
• "A selector can return any object." No. A new object on every call means a change on every read, and React renders forever. Select single values, or use useShallow.
• "With a store, components don't render." They do, when the part they read changes. A store only skips the ones whose part didn't.

Practice exercises

Every exercise shows its result, with the render counters. Press Edit & run to change the code; the result updates as you type.

1import { createContext, useContext, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const teas = [5  { id: "green", name: "Green tea", price: 3 },6  { id: "mint", name: "Mint tea", price: 4 },7  { id: "chai", name: "Chai", price: 5 },8];9 10const CartContext = createContext(null);11 12function CartProvider({ children }) {13  const [items, setItems] = useState([]);14  const [note, setNote] = useState("");15  const add = (tea) => setItems([...items, tea]);16  return (17    <CartContext value={{ items, note, add, setNote }}>18      {children}19    </CartContext>20  );21}22 23function CartBadge() {24  const count = useContext(CartContext).items.length;25  return <p className="box">Cart: {count} <RenderCount /></p>;26}27 28function ProductList() {29  const { add } = useContext(CartContext);30  return (31    <div className="box">32      {teas.map((tea) => (33        <button key={tea.id} onClick={() => add(tea)}>Add {tea.name}</button>34      ))}35      <RenderCount />36    </div>37  );38}39 40function GiftNote() {41  const { note, setNote } = useContext(CartContext);42  return (43    <p className="box">44      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />45      <RenderCount />46    </p>47  );48}49 50function CartTotal() {51  const { items } = useContext(CartContext);52  const total = items.reduce((sum, tea) => sum + tea.price, 0);53  return <p className="box">Total: ${total} <RenderCount /></p>;54}55 56export default function App() {57  return (58    <CartProvider>59      <CartBadge />60      <ProductList />61      <GiftNote />62      <CartTotal />63    </CartProvider>64  );65}

1import { createContext, useContext, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4const teas = [5  { id: "green", name: "Green tea", price: 3 },6  { id: "mint", name: "Mint tea", price: 4 },7  { id: "chai", name: "Chai", price: 5 },8];9 10const CartContext = createContext(null);11 12function CartProvider({ children }) {13  const [items, setItems] = useState([]);14  const [note, setNote] = useState("");15  const add = (tea) => setItems([...items, tea]);16  return (17    <CartContext value={{ items, note, add, setNote }}>18      {children}19    </CartContext>20  );21}22 23function CartBadge() {24  const count = useContext(CartContext).items.length;25  return <p className="box">Cart: {count} <RenderCount /></p>;26}27 28function ProductList() {29  const { add } = useContext(CartContext);30  return (31    <div className="box">32      {teas.map((tea) => (33        <button key={tea.id} onClick={() => add(tea)}>Add {tea.name}</button>34      ))}35      <RenderCount />36    </div>37  );38}39 40function GiftNote() {41  const { note, setNote } = useContext(CartContext);42  return (43    <p className="box">44      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />45      <RenderCount />46    </p>47  );48}49 50function CartTotal() {51  const { items } = useContext(CartContext);52  const total = items.reduce((sum, tea) => sum + tea.price, 0);53  return <p className="box">Total: ${total} <RenderCount /></p>;54}55 56export default function App() {57  return (58    <CartProvider>59      <CartBadge />60      <ProductList />61      <GiftNote />62      <CartTotal />63    </CartProvider>64  );65}

1import { createStore, useStore } from "./store.js";2import RenderCount from "./RenderCount.jsx";3 4const teas = [5  { id: "green", name: "Green tea", price: 3 },6  { id: "mint", name: "Mint tea", price: 4 },7  { id: "chai", name: "Chai", price: 5 },8];9 10const cartStore = createStore({ items: [], note: "" });11 12function add(tea) {13  const state = cartStore.getState();14  cartStore.setState({ ...state, items: [...state.items, tea] });15}16 17function setNote(note) {18  cartStore.setState({ ...cartStore.getState(), note });19}20 21function CartBadge() {22  const count = useStore(cartStore, (state) => state.items.length);23  return <p className="box">Cart: {count} <RenderCount /></p>;24}25 26function ProductList() {27  // Reads nothing from the store, so the store never renders it.28  return (29    <div className="box">30      {teas.map((tea) => (31        <button key={tea.id} onClick={() => add(tea)}>Add {tea.name}</button>32      ))}33      <RenderCount />34    </div>35  );36}37 38function GiftNote() {39  const note = useStore(cartStore, (state) => state.note);40  return (41    <p className="box">42      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />43      <RenderCount />44    </p>45  );46}47 48function CartTotal() {49  const total = useStore(cartStore, (state) =>50    state.items.reduce((sum, tea) => sum + tea.price, 0),51  );52  return <p className="box">Total: ${total} <RenderCount /></p>;53}54 55export default function App() {56  return (57    <>58      <CartBadge />59      <ProductList />60      <GiftNote />61      <CartTotal />62    </>63  );64}

1import { createStore, useStore } from "./store.js";2import RenderCount from "./RenderCount.jsx";3 4const teas = [5  { id: "green", name: "Green tea", price: 3 },6  { id: "mint", name: "Mint tea", price: 4 },7  { id: "chai", name: "Chai", price: 5 },8];9 10const cartStore = createStore({ items: [], note: "" });11 12function add(tea) {13  const state = cartStore.getState();14  cartStore.setState({ ...state, items: [...state.items, tea] });15}16 17function setNote(note) {18  cartStore.setState({ ...cartStore.getState(), note });19}20 21function CartBadge() {22  const count = useStore(cartStore, (state) => state.items.length);23  return <p className="box">Cart: {count} <RenderCount /></p>;24}25 26function ProductList() {27  // Reads nothing from the store, so the store never renders it.28  return (29    <div className="box">30      {teas.map((tea) => (31        <button key={tea.id} onClick={() => add(tea)}>Add {tea.name}</button>32      ))}33      <RenderCount />34    </div>35  );36}37 38function GiftNote() {39  const note = useStore(cartStore, (state) => state.note);40  return (41    <p className="box">42      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />43      <RenderCount />44    </p>45  );46}47 48function CartTotal() {49  const total = useStore(cartStore, (state) =>50    state.items.reduce((sum, tea) => sum + tea.price, 0),51  );52  return <p className="box">Total: ${total} <RenderCount /></p>;53}54 55export default function App() {56  return (57    <>58      <CartBadge />59      <ProductList />60      <GiftNote />61      <CartTotal />62    </>63  );64}

import { createStore, useStore } from "./store.js";
import RenderCount from "./RenderCount.jsx";

const teas = [
  { id: "green", name: "Green tea", price: 3 },
  { id: "mint", name: "Mint tea", price: 4 },
  { id: "chai", name: "Chai", price: 5 },
];

const cartStore = createStore({ items: [], note: "" });

function add(tea) {
  const state = cartStore.getState();
  cartStore.setState({ ...state, items: [...state.items, tea] });
}

function setNote(note) {
  cartStore.setState({ ...cartStore.getState(), note });
}

function CartBadge() {
  const { count } = useStore(cartStore, (state) => ({ count: state.items.length }));
  return <p className="box">Cart: {count} <RenderCount /></p>;
}

function ProductList() {
  // Reads nothing from the store, so the store never renders it.
  return (
    <div className="box">
      {teas.map((tea) => (
        <button key={tea.id} onClick={() => add(tea)}>Add {tea.name}</button>
      ))}
      <RenderCount />
    </div>
  );
}

function GiftNote() {
  const note = useStore(cartStore, (state) => state.note);
  return (
    <p className="box">
      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />
      <RenderCount />
    </p>
  );
}

function CartTotal() {
  const total = useStore(cartStore, (state) =>
    state.items.reduce((sum, tea) => sum + tea.price, 0),
  );
  return <p className="box">Total: ${total} <RenderCount /></p>;
}

export default function App() {
  return (
    <>
      <CartBadge />
      <ProductList />
      <GiftNote />
      <CartTotal />
    </>
  );
}

1import { createStore, useStore } from "./store.js";2import RenderCount from "./RenderCount.jsx";3 4const teas = [5  { id: "green", name: "Green tea", price: 3 },6  { id: "mint", name: "Mint tea", price: 4 },7  { id: "chai", name: "Chai", price: 5 },8];9 10const cartStore = createStore({ items: [], note: "" });11 12function add(tea) {13  const state = cartStore.getState();14  cartStore.setState({ ...state, items: [...state.items, tea] });15}16 17function setNote(note) {18  cartStore.setState({ ...cartStore.getState(), note });19}20 21function CartBadge() {22  const count = useStore(cartStore, (state) => state.items.length);23  return <p className="box">Cart: {count} <RenderCount /></p>;24}25 26function ProductList() {27  // Reads nothing from the store, so the store never renders it.28  return (29    <div className="box">30      {teas.map((tea) => (31        <button key={tea.id} onClick={() => add(tea)}>Add {tea.name}</button>32      ))}33      <RenderCount />34    </div>35  );36}37 38function GiftNote() {39  const note = useStore(cartStore, (state) => state.note);40  return (41    <p className="box">42      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />43      <RenderCount />44    </p>45  );46}47 48function CartTotal() {49  const total = useStore(cartStore, (state) =>50    state.items.reduce((sum, tea) => sum + tea.price, 0),51  );52  return <p className="box">Total: ${total} <RenderCount /></p>;53}54 55export default function App() {56  return (57    <>58      <CartBadge />59      <ProductList />60      <GiftNote />61      <CartTotal />62    </>63  );64}

1import { create } from "zustand@5.0.16?dev&deps=react@19.3.1,react-dom@19.3.1";2import RenderCount from "./RenderCount.jsx";3 4const teas = [5  { id: "green", name: "Green tea", price: 3 },6  { id: "mint", name: "Mint tea", price: 4 },7  { id: "chai", name: "Chai", price: 5 },8];9 10const useCart = create((set) => ({11  items: [],12  note: "",13  add: (tea) => set((state) => ({ items: [...state.items, tea] })),14  setNote: (note) => set({ note }),15}));16 17function CartBadge() {18  const count = useCart((state) => state.items.length);19  return <p className="box">Cart: {count} <RenderCount /></p>;20}21 22function ProductList() {23  const add = useCart((state) => state.add);24  return (25    <div className="box">26      {teas.map((tea) => (27        <button key={tea.id} onClick={() => add(tea)}>Add {tea.name}</button>28      ))}29      <RenderCount />30    </div>31  );32}33 34function GiftNote() {35  const note = useCart((state) => state.note);36  const setNote = useCart((state) => state.setNote);37  return (38    <p className="box">39      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />40      <RenderCount />41    </p>42  );43}44 45function CartTotal() {46  const total = useCart((state) =>47    state.items.reduce((sum, tea) => sum + tea.price, 0),48  );49  return <p className="box">Total: ${total} <RenderCount /></p>;50}51 52export default function App() {53  return (54    <>55      <CartBadge />56      <ProductList />57      <GiftNote />58      <CartTotal />59    </>60  );61}

1import { create } from "zustand@5.0.16?dev&deps=react@19.3.1,react-dom@19.3.1";2import RenderCount from "./RenderCount.jsx";3 4const teas = [5  { id: "green", name: "Green tea", price: 3 },6  { id: "mint", name: "Mint tea", price: 4 },7  { id: "chai", name: "Chai", price: 5 },8];9 10const useCart = create((set) => ({11  items: [],12  note: "",13  add: (tea) => set((state) => ({ items: [...state.items, tea] })),14  setNote: (note) => set({ note }),15  clear: () => set({ items: [] }),16}));17 18function CartBadge() {19  const count = useCart((state) => state.items.length);20  const clear = useCart((state) => state.clear);21  return (22    <p className="box">23      Cart: {count} <button onClick={clear}>Empty cart</button> <RenderCount />24    </p>25  );26}27 28function ProductList() {29  const add = useCart((state) => state.add);30  return (31    <div className="box">32      {teas.map((tea) => (33        <button key={tea.id} onClick={() => add(tea)}>Add {tea.name}</button>34      ))}35      <RenderCount />36    </div>37  );38}39 40function GiftNote() {41  const note = useCart((state) => state.note);42  const setNote = useCart((state) => state.setNote);43  return (44    <p className="box">45      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />46      <RenderCount />47    </p>48  );49}50 51function CartTotal() {52  const total = useCart((state) =>53    state.items.reduce((sum, tea) => sum + tea.price, 0),54  );55  return <p className="box">Total: ${total} <RenderCount /></p>;56}57 58export default function App() {59  return (60    <>61      <CartBadge />62      <ProductList />63      <GiftNote />64      <CartTotal />65    </>66  );67}

1import { configureStore, createSlice } from "@reduxjs/toolkit@2.13.0?dev&deps=react@19.3.1,react-dom@19.3.1";2import { Provider, useDispatch, useSelector } from "react-redux@9.3.0?dev&deps=react@19.3.1,react-dom@19.3.1";3import RenderCount from "./RenderCount.jsx";4 5const teas = [6  { id: "green", name: "Green tea", price: 3 },7  { id: "mint", name: "Mint tea", price: 4 },8  { id: "chai", name: "Chai", price: 5 },9];10 11const cartSlice = createSlice({12  name: "cart",13  initialState: { items: [], note: "" },14  reducers: {15    added(state, action) {16      state.items.push(action.payload);17    },18    noteChanged(state, action) {19      state.note = action.payload;20    },21  },22});23const { added, noteChanged } = cartSlice.actions;24const store = configureStore({ reducer: { cart: cartSlice.reducer } });25 26function CartBadge() {27  const count = useSelector((state) => state.cart.items.length);28  return <p className="box">Cart: {count} <RenderCount /></p>;29}30 31function ProductList() {32  const dispatch = useDispatch();33  return (34    <div className="box">35      {teas.map((tea) => (36        <button key={tea.id} onClick={() => dispatch(added(tea))}>Add {tea.name}</button>37      ))}38      <RenderCount />39    </div>40  );41}42 43function GiftNote() {44  const note = useSelector((state) => state.cart.note);45  const dispatch = useDispatch();46  return (47    <p className="box">48      <input placeholder="Gift note" value={note} onChange={(event) => dispatch(noteChanged(event.target.value))} />49      <RenderCount />50    </p>51  );52}53 54function CartTotal() {55  const total = useSelector((state) =>56    state.cart.items.reduce((sum, tea) => sum + tea.price, 0),57  );58  return <p className="box">Total: ${total} <RenderCount /></p>;59}60 61export default function App() {62  return (63    <Provider store={store}>64      <CartBadge />65      <ProductList />66      <GiftNote />67      <CartTotal />68    </Provider>69  );70}

1import { configureStore, createSlice } from "@reduxjs/toolkit@2.13.0?dev&deps=react@19.3.1,react-dom@19.3.1";2import { Provider, useDispatch, useSelector } from "react-redux@9.3.0?dev&deps=react@19.3.1,react-dom@19.3.1";3import RenderCount from "./RenderCount.jsx";4 5const teas = [6  { id: "green", name: "Green tea", price: 3 },7  { id: "mint", name: "Mint tea", price: 4 },8  { id: "chai", name: "Chai", price: 5 },9];10 11const cartSlice = createSlice({12  name: "cart",13  initialState: { items: [], note: "" },14  reducers: {15    added(state, action) {16      state.items.push(action.payload);17    },18    noteChanged(state, action) {19      state.note = action.payload;20    },21    lastRemoved(state) {22      state.items.pop();23    },24  },25});26const { added, noteChanged, lastRemoved } = cartSlice.actions;27const store = configureStore({ reducer: { cart: cartSlice.reducer } });28 29function CartBadge() {30  const count = useSelector((state) => state.cart.items.length);31  return <p className="box">Cart: {count} <RenderCount /></p>;32}33 34function ProductList() {35  const dispatch = useDispatch();36  return (37    <div className="box">38      {teas.map((tea) => (39        <button key={tea.id} onClick={() => dispatch(added(tea))}>Add {tea.name}</button>40      ))}41      <button onClick={() => dispatch(lastRemoved())}>Remove last</button>42      <RenderCount />43    </div>44  );45}46 47function GiftNote() {48  const note = useSelector((state) => state.cart.note);49  const dispatch = useDispatch();50  return (51    <p className="box">52      <input placeholder="Gift note" value={note} onChange={(event) => dispatch(noteChanged(event.target.value))} />53      <RenderCount />54    </p>55  );56}57 58function CartTotal() {59  const total = useSelector((state) =>60    state.cart.items.reduce((sum, tea) => sum + tea.price, 0),61  );62  return <p className="box">Total: ${total} <RenderCount /></p>;63}64 65export default function App() {66  return (67    <Provider store={store}>68      <CartBadge />69      <ProductList />70      <GiftNote />71      <CartTotal />72    </Provider>73  );74}

1import { atom, useAtom, useAtomValue, useSetAtom } from "jotai@3.0.1?dev&deps=react@19.3.1,react-dom@19.3.1";2import RenderCount from "./RenderCount.jsx";3 4const teas = [5  { id: "green", name: "Green tea", price: 3 },6  { id: "mint", name: "Mint tea", price: 4 },7  { id: "chai", name: "Chai", price: 5 },8];9 10const itemsAtom = atom([]);11const noteAtom = atom("");12const countAtom = atom((get) => get(itemsAtom).length);13const totalAtom = atom((get) =>14  get(itemsAtom).reduce((sum, tea) => sum + tea.price, 0),15);16 17function CartBadge() {18  const count = useAtomValue(countAtom);19  return <p className="box">Cart: {count} <RenderCount /></p>;20}21 22function ProductList() {23  const setItems = useSetAtom(itemsAtom);24  return (25    <div className="box">26      {teas.map((tea) => (27        <button key={tea.id} onClick={() => setItems((items) => [...items, tea])}>Add {tea.name}</button>28      ))}29      <RenderCount />30    </div>31  );32}33 34function GiftNote() {35  const [note, setNote] = useAtom(noteAtom);36  return (37    <p className="box">38      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />39      <RenderCount />40    </p>41  );42}43 44function CartTotal() {45  const total = useAtomValue(totalAtom);46  return <p className="box">Total: ${total} <RenderCount /></p>;47}48 49export default function App() {50  return (51    <>52      <CartBadge />53      <ProductList />54      <GiftNote />55      <CartTotal />56    </>57  );58}

1import { atom, useAtom, useAtomValue, useSetAtom } from "jotai@3.0.1?dev&deps=react@19.3.1,react-dom@19.3.1";2import RenderCount from "./RenderCount.jsx";3 4const teas = [5  { id: "green", name: "Green tea", price: 3 },6  { id: "mint", name: "Mint tea", price: 4 },7  { id: "chai", name: "Chai", price: 5 },8];9 10const itemsAtom = atom([]);11const noteAtom = atom("");12const countAtom = atom((get) => get(itemsAtom).length);13const totalAtom = atom((get) =>14  get(itemsAtom).reduce((sum, tea) => sum + tea.price, 0),15);16const freeShippingAtom = atom((get) => get(totalAtom) >= 10);17 18function CartBadge() {19  const count = useAtomValue(countAtom);20  return <p className="box">Cart: {count} <RenderCount /></p>;21}22 23function ProductList() {24  const setItems = useSetAtom(itemsAtom);25  return (26    <div className="box">27      {teas.map((tea) => (28        <button key={tea.id} onClick={() => setItems((items) => [...items, tea])}>Add {tea.name}</button>29      ))}30      <RenderCount />31    </div>32  );33}34 35function GiftNote() {36  const [note, setNote] = useAtom(noteAtom);37  return (38    <p className="box">39      <input placeholder="Gift note" value={note} onChange={(event) => setNote(event.target.value)} />40      <RenderCount />41    </p>42  );43}44 45function CartTotal() {46  const total = useAtomValue(totalAtom);47  const freeShipping = useAtomValue(freeShippingAtom);48  return (49    <p className="box">50      Total: ${total} {freeShipping && "Free shipping!"} <RenderCount />51    </p>52  );53}54 55export default function App() {56  return (57    <>58      <CartBadge />59      <ProductList />60      <GiftNote />61      <CartTotal />62    </>63  );64}

Check your understanding

For each question, ask what kind of state it is, and which components read the part that changed.

Key takeaways

• Sort state first: one component's state, the URL, the server's data in a data library, and shared client state. Only the last can need a state library.
• Lifted state and context are enough for many apps, especially for values that rarely change, like a theme or the signed-in user.
• Every reader of a context renders when its value changes. A store with selectors renders only the readers whose part changed.
• Zustand gives one store and a hook, with no provider. Redux Toolkit changes state only through actions and reducers, with Immer and strong tools. Jotai splits state into atoms and derived atoms.
• Selectors must return values that stay the same while the state does: a new object on every read renders forever.
• A store can be changed from plain JavaScript and saved with middleware like persist.

Coming next: Structuring a React project. It shows where stores, hooks, and components go as an app grows.