Intermediate LevelReact JS & React 19
What is state colocation and why is it the first step in React performance tuning?
❓ Interview Prompt: Explain State Colocation, moving state as close as possible to usage, avoiding unnecessary global state, and preventing parent component re-renders.
State Colocation is the practice of keeping component state as close to where it is actually used as possible:
Why It Improves Performance:
When state updates, React re-renders the component owning that state AND all of its child components.
•
Anti-Pattern: Storing a simple modal toggle state in the top-level '<App />' component forces the ENTIRE application tree to re-render on every toggle!
•
Colocated Fix: Move 'isModalOpen' state down into the specific '<ModalLauncher />' button component.
Code Implementation Example
jsx
// ❌ BAD: Lifting modal state to App causes top-level App re-renders!
function App() {
const [isOpen, setIsOpen] = useState(false);
return <div><HeavyHeader /><Modal isOpen={isOpen} /></div>;
}
// ✅ GOOD: Colocate modal state inside local ModalWrapper component!
function ModalWrapper() {
const [isOpen, setIsOpen] = useState(false);
return <><button onClick={() => setIsOpen(true)}>Open</button>{isOpen && <Modal /></>;
}💡Colocating state locally to prevent top-level application re-renders.
🎯 Interview Key Takeaway
Colocate state as close as possible to where it is rendered to prevent unnecessary parent and sibling re-renders.
#State Colocation#Performance#State Management#Intermediate
Back to all React JS & React 19 Questions→