Lifting and colocation: state lives at the lowest common owner

One owner, props down, events up

React state is local by design: a useState belongs to exactly one component instance, and that instance is the single owner — the only place the value can change. When two components need the same changing value, you do not duplicate it (two copies will drift; the bug report reads “the filter chip says active but the list is unfiltered”). You lift it up: find the lowest component that is an ancestor of every reader — the lowest common owner — move the state there, pass the value down as props, and pass change-handlers down so children can request updates. Data flows down, events flow up, and there is one source of truth per piece of state.

function SearchSection() {
  // Lowest common owner of <SearchInput> and <ResultsList>:
  // both need `query`, so it lives here — and no higher.
  const [query, setQuery] = useState("");
  return (
    <section>
      <SearchInput value={query} onChange={setQuery} />
      <ResultsList query={query} />
    </section>
  );
}

function SearchInput({ value, onChange }) {
  // Controlled: this component owns nothing; it reports intent upward.
  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}

The key word is lowest. Lifting is not “move it to the top” — it is “move it exactly as high as the nearest shared ancestor and stop.” Each level you lift past that point adds subscribers it never needed.

Blast radius: why height is a performance decision

When you see components re-rendering with no apparent reason, ask: how high does their owning state sit? When state changes, React re-renders the owner component and then, by default, its entire subtree — every descendant gets called again, whether or not it reads the changed value. (Re-render is the cheap render phase, not DOM mutation — but calling 1,400 functions and reconciling their output 60 times while someone types is not free.) The height of a piece of state therefore determines its blast radius: state in a leaf re-renders a leaf; state at the root re-renders the app. This is the mechanism behind the “global by default” anti-pattern — putting everything in a root store or top-level context doesn’t just make code harder to trace, it makes every write an app-wide render and then forces you to fight back with React.memo on hundreds of components. Colocation is the inverse discipline: when you notice only one subtree reads a value, push the state back down into it. Moving state down is a pure win — fewer renders, less prop-threading, and the component becomes deletable as a unit.

Composition: isolating state with the children prop

There is a structural escape hatch that beats memoization for the common case: pass expensive subtrees as children. JSX children are elements — objects created where the JSX is written, not where it is rendered. If a stateful wrapper receives its content via children, the wrapper’s re-render reuses the exact same element objects it was given (its parent, which created them, did not re-render). React sees the identical element reference and bails out of re-rendering that subtree entirely.

function ScrollTracker({ children }) {
  const [y, setY] = useState(0); // updates on every scroll tick
  // children was created by the parent and hasn't changed —
  // same element reference, so React skips re-rendering it.
  return <div onScroll={(e) => setY(e.target.scrollTop)}>
    <ProgressBar y={y} />
    {children}
  </div>;
}

// <ScrollTracker><HeavyTable rows={rows} /></ScrollTracker>
// HeavyTable does NOT re-render on scroll.

This is state isolation by architecture: high-frequency state (scroll, hover, input drafts) gets a narrow component to live in, and the heavy content passes through it untouched. Tradeoff: lifting and colocating is a refactor every time requirements shift — a value used by one component today gets a second reader tomorrow, and you must move it. That friction is real, and it is the honest price of blast-radius control; teams that refuse to pay it drift back to global-by-default and pay in renders instead. Failure mode: duplicating state instead of lifting (“I’ll just keep a local copy too”) — two owners, eventual divergence, and the class of bug where the UI disagrees with itself.