Managing state
Quick answer: Local useState stops scaling when siblings and deep trees need the same data—here is lifted state, Context, and useReducer, with a path into Advanced React (Pro) for full depth.
This page covers patterns for state that outgrows local useState: lifting state to a shared parent when siblings must stay in sync, Context to pass values deep without prop drilling, and useReducer to centralize many related updates in one function. Reach for these when coordination spans the tree or handlers multiply.
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.
Related Scrimba courses
Context and reducer depth also sit in Pro Advanced React; see pricing.
Ready to Upgrade Your Learning?
Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.