When to Use Global vs Local State
Apply the principle of colocation: keep state as close to its consumer as possible, and lift it only when multiple unrelated components need it.
The State Location Question
Every piece of state has an optimal home. Choosing the wrong location leads to either prop drilling pain or unnecessary global state complexity. The guiding principle: keep state as close to its consumers as possible.
Local Component State
If only one component uses the state, it belongs in that component's useState/ref. No sharing needed — keep it local. This is the simplest and most common case.
// Good: UI state local to the component
function Accordion() {
const [isOpen, setIsOpen] = useState(false); // only this component cares
return (
<div>
<button onClick={() => setIsOpen(o => !o)}>Toggle</button>
{isOpen && <div>Content</div>}
</div>
);
}All lessons in this course
- Redux Toolkit: createSlice and configureStore
- Zustand for Lightweight React State
- Pinia for Vue: defineStore and storeToRefs
- When to Use Global vs Local State