Managing State
Quick Answer: Companion guide mapping docs to Scrimba lessons. See below for the roadmap.
Last reviewed: March 2026.
As your application grows, simple useState isn't enough. You need to manage state that is shared across many components or has complex update logic.
Who This Is For
Learners following the React or Next.js roadmap.
1. Sharing State Between Components
When two components need to coordinate, you lift state up to their closest common parent.
But what if they are far apart?
2. Context: Passing Data Deeply
Context lets you pass data through the component tree without having to pass props down manually at every level ("prop drilling").
- Create:
const ThemeContext = createContext(null); - Provide:
<ThemeContext.Provider value="dark">...</ThemeContext.Provider> - Consume:
const theme = useContext(ThemeContext);
Learn it on Scrimba: -> Interactive Lesson: Context API (Advanced React Course)
3. Extracting State Logic into a Reducer
When you have many event handlers modifying state in complex ways, useReducer helps consolidate that logic into a single function outside your component.
function reducer(state, action) {
switch (action.type) {
case 'increment': return { count: state.count + 1 };
case 'decrement': return { count: state.count - 1 };
default: return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<>
<span>{state.count}</span>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</>
);
}
It lets you move from "set loading, then fetch, then set data" to "dispatch 'FETCH_SUCCESS'." Choosing the State Structure: Keep state flat when possible; group related data; avoid redundant state (derive it instead).
This is covered in depth in the Advanced React course.
Advanced React (Pro)
ProTake your state management skills to the professional level with Context, Reducers, and optimization.
View on Scrimba (opens in a new tab)Choose This If
Choose this page if: You're learning React or Next.js and want a docs-to-Scrimba roadmap.
Ready to Upgrade Your Learning?
Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.