State Management

Learning objectives#

• Classify state as local, shared, server, URL or form state
• Choose the simplest tool for each kind
• Compare Context, Redux Toolkit and Zustand
• Know why server data deserves its own tool

Explanation#

Local UI state (is this dropdown open?) → useState in the component.

Shared client state (cart, theme, signed-in user) → lift state up or Context. When it grows large or changes often, use a store library: Redux Toolkit (structured, great DevTools, common in large teams) or Zustand (tiny, simple hooks).

Server state (products, orders) is a cache of data owned by the backend. TanStack Query or SWR handle fetching, caching, refetching and invalidation — do not copy it into Redux by hand.

URL state (page number, filters, selected tab) → search params, so it survives refresh and can be shared.

Form state → controlled inputs or a form library like React Hook Form.

Rule of thumb: start with useState and props; add tools only when a real pain appears.

Syntax#

1Kind of state       Example                 Tool
2local UI            modal open?             useState
3shared client       cart, theme, user       Context / Zustand / Redux Toolkit
4server cache        products, orders        TanStack Query / SWR
5URL                 ?page=2&q=pen           useSearchParams
6form                sign-up fields          controlled inputs / React Hook Form

Code example: A tiny global store with useSyncExternalStore#

1import { useSyncExternalStore } from 'react';
2

3// A minimal store — the idea behind Zustand and Redux, in 20 lines
4function createStore(initialState) {
5  let state = initialState;
6  const listeners = new Set();
7  return {
8    getState: () => state,
9    setState: update => {
10      state = { ...state, ...(typeof update === 'function' ? update(state) : update) };
11      listeners.forEach(l => l());
12    },
13    subscribe: listener => {
14      listeners.add(listener);
15      return () => listeners.delete(listener);
16    },
17  };
18}
19

20const cartStore = createStore({ items: [] });
21

22function useCartStore(selector) {
23  return useSyncExternalStore(cartStore.subscribe, () => selector(cartStore.getState()), () => selector(cartStore.getState()));
24}
25

26const addItem = name => cartStore.setState(s => ({ items: [...s.items, name] }));
27

28function CartCount() {
29  const count = useCartStore(s => s.items.length);       // re-renders only when the count changes
30  return <p>Cart: {count}</p>;
31}
32

33function AddButtons() {
34  return ['Pen', 'Bag'].map(name => <button key={name} onClick={() => addItem(name)}>Add {name}</button>);
35}
36

37export default function App() {
38  return (
39    <>
40      <CartCount />
41      <AddButtons />   {/* no provider, no props */}
42    </>
43  );
44}

“Cart: 0” and two buttons. Each click increases the count. CartCount and AddButtons share state through the store without props or a provider — this is the model Zustand and Redux build on (with Redux adding actions, reducers and DevTools).

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. createStore keeps state outside React and notifies subscribers on change.
2. useSyncExternalStore is React’s official hook for reading external stores safely.
3. The selector lets CartCount subscribe to just the count.
4. addItem can be called from anywhere — even outside components.

Real-world use case#

Common mistakes#

Best practices#

• Classify state before choosing a tool
• Keep state as local as possible
• Use a server-cache library for API data
• Put shareable UI state in the URL

Remember this#

Practice exercise#

11. Tooltip visible       → local UI state (useState)
22. Logged-in user        → shared client state (Context or a store)
33. Products from the API → server state (TanStack Query / SWR, or fetch + state)
44. Search page number    → URL state (useSearchParams)
55. Comment box text      → form/local state (controlled input)

Mini quiz#

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.