State colocation and lifting

Where state lives decides what re-renders

Advice to lift state up is about correctness, not performance. Lifted state re-renders everything below its new owner, so a value used by one input at the bottom of the tree should not live at the top of it.

Colocation is the counter-move: push each piece of state down until it sits at the closest common ancestor of the components that read it, and no higher.

When state genuinely must live high up, passing an expensive subtree through the children prop keeps it out of the re-render — it was created by the parent above and its element identity does not change.