0Pricing
React Academy · Lesson

Choosing the Right State Location

Apply a decision framework: local state, lifted state, or global state.

Choosing the Right State Location is a free React Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will learn a practical decision framework for deciding whether state belongs in a single component, a common ancestor, React Context, or a global state library.

Step 1: Who Uses This State?

First ask: which components render using this state? List them. If only one component uses it, keep state local in that component.

Local State

State used by exactly one component lives in that component with useState. Examples: whether a dropdown is open, the current value of a controlled input, whether a tooltip is visible.
function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}

Step 2: Find the Common Ancestor

If multiple components need the state, find their closest common ancestor in the component tree. Move state there and pass it down as props.

Lifted State (2–3 levels)

State shared by 2–3 components at the same nesting level is a good candidate for lifting. The common parent owns it and threads it down via props.

Step 3: Is Prop Drilling Too Deep?

If the common ancestor is 4+ levels above consumers, passing props through intermediate components creates noise. Consider Context.

Context State

Use Context for cross-cutting concerns that many components across the tree need: the current authenticated user, the active theme, the selected locale. These rarely change and have many consumers.

Step 4: Is State Complex or Shared Across Pages?

If state has complex update logic, needs undo/redo, must persist across navigation, or is accessed in completely separate component trees, use a dedicated state library (Zustand, Redux).

Server State Is Different

Data fetched from a server is *server state*, not UI state. Do not store it in useState or a global store — use React Query, SWR, or RTK Query which handle caching, refetching, and error states automatically.

The Decision Flowchart

1 consumer → local useState. 2-3 consumers at similar depth → lift to parent. 4+ levels of drilling → Context. Complex logic or cross-tree → Zustand/Redux. Server data → React Query/SWR.

Quick Check

Which state location is most appropriate for the current authenticated user that many components across a large app need to access?

Recap

Match state location to consumers: local for one, lifted for few nearby, Context for many across levels, state library for complex/cross-tree, React Query for server data.

Course Complete

Congratulations! You finished **Lifting State Up & Prop Drilling Solutions**. You now have a clear framework for deciding where state lives and how to share it correctly.

Frequently asked questions

Is the “Choosing the Right State Location” lesson free?

Yes — the full text of “Choosing the Right State Location” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Choosing the Right State Location”?

Apply a decision framework: local state, lifted state, or global state. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Choosing the Right State Location” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Lifting State Up: Principles & Examples
  2. Prop Drilling: When It Hurts & When It's Fine
  3. Sibling Communication Patterns
  4. Choosing the Right State Location
← Back to React Academy