state colocation
Keep state close to where it's used
When state lives higher in the tree than necessary, every update re-renders components that don't use it. The rule: start with state as local as possible and lift it only when two or more components need to share it.
The problem
If useState is in App but only Dropdown uses it, every state change causes React to re-render App and all its children — including Header and Sidebar, which have nothing to do with that state. The result: unnecessary renders that grow with the tree.
The solution
Move the state to the component that needs it. If only Dropdown uses open, the useState belongs inside Dropdown. When the state changes, only that component re-renders — the rest of the tree is untouched. Lift state to a parent only when two sibling components both need to read or write it.
Common pitfalls
- 01Don't lift state 'just in case' you need it higher later — YAGNI. Move it up only when two sibling components genuinely need it.
- 02If you find state is needed in two distinct branches of the tree, consider Context or a global store — but only when real prop drilling forces the issue.
- 03Colocating local state doesn't prevent child components from using memo to skip renders caused by unrelated prop changes.