State colocation means placing state as close as possible to the component that actually uses it, instead of lifting it up or making it global unnecessarily.
🔹 Why State Colocation Is Important
- Prevents unnecessary re-renders
- Makes components easier to understand
- Avoids prop drilling
- Reduces global state complexity
- Improves performance
🧠 Simple Idea
Don’t lift state unless you must.
❌ Bad Example (State Too High)
function App() {
const [open, setOpen] = useState(false);
return <Modal isOpen={open} />;
}
If only Modal uses open, this state doesn’t belong in App.
✅ Good Example (Colocated State)
function Modal() {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Open</button>
{open && <div>Modal Content</div>}
</>
);
}
✔ State lives where it’s used
🧪 When to Lift State Up
Lift state only if:
- Multiple components need it
- Sibling components share data
- Parent must control behavior
🔁 State Colocation vs Global State
| State Type | Where to Keep |
|---|---|
| Component-only | Inside component |
| Shared by siblings | Common parent |
| App-wide | Context / Redux |
🎯 Real-World Example
❌ Don’t store input field state in Redux
✔ Keep it inside the input component
🎯 Short Interview Answer
State colocation is the practice of keeping state as close as possible to the components that use it. This reduces unnecessary re-renders, avoids overusing global state, and keeps components easier to maintain.
⭐ One-line summary
Colocate state where it’s used—lift or globalize only when necessary.
