What is state colocation, and how can it make a slow component fast without memo?
Keep state in the lowest component that needs it. If only a small input uses a value, move that state into the input's own component, so typing no longer re-renders the heavy sibling components in the parent.
Explain it simply
If one student asks a question, you do not need to stop the entire school assembly. Put the conversation in a small room. State works the same way: when a parent holds state that only one child uses, every change re-renders the parent and all its other children.
Moving the state down into the component that really uses it shrinks the re-render to that small branch. No memo, no useCallback, just a change of where the state lives.
A second trick is passing expensive subtrees as children. Because children is created by the parent's parent, it keeps the same reference when the wrapper's state changes, and React skips it.
Example
// Slow: typing re-renders <HeavyTable />
function Page() {
const [text, setText] = useState("");
return (
<>
<input value={text} onChange={e => setText(e.target.value)} />
<HeavyTable />
</>
);
}
// Fast: state moved into its own component
function SearchBox() {
const [text, setText] = useState("");
return <input value={text} onChange={e => setText(e.target.value)} />;
}
function Page2() { return <><SearchBox /><HeavyTable /></>; }What to say in the interview
"Before reaching for memoisation, I check whether state sits too high. Moving it down to the component that uses it limits re-renders to that subtree. Passing heavy content as children also works because their element references do not change when the wrapper state changes."
Common mistakes
- Keeping all state in the root component out of habit.