Colocation and lifting

Colocate: state belongs in the lowest component that actually reads it. If exactly one subtree consumes a value, that’s where useState goes. Colocation isn’t a tidiness preference — when state lives at component X, every render triggered by that state is scoped to X and its children. Put it one level too high and React re-renders that whole level, including siblings that never touch the value.

// colocated: the open/closed state lives in the only thing that uses it
function FaqItem({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <li>
      <button onClick={() => setOpen((o) => !o)}>{q}</button>
      {open && <p>{a}</p>}
    </li>
  );
}

Toggling one FAQ item re-renders that item. The list, the page header, the sibling items — untouched. State location is the re-render boundary.

Over-lifted state is the silent default that costs you renders and prop drilling. The reflex “hoist it so it’s available” puts a value far above its only reader. Now React re-renders everything between the owner and the reader on every change, and you thread the value (and its setter) through components that don’t care.

// over-lifted: `draft` lives in the page, but only <Composer> reads it
function InboxPage() {
  const [draft, setDraft] = useState("");        // wrong home
  return (
    <Layout>
      <Sidebar />                                  {/* re-renders on every keystroke */}
      <ThreadList />                               {/* re-renders on every keystroke */}
      <Composer draft={draft} setDraft={setDraft} /> {/* the only real reader */}
    </Layout>
  );
}

Every character typed in <Composer> re-renders <Sidebar> and <ThreadList>. They render the same output every time — pure waste — and draft/setDraft are now part of the page’s surface area for no reason.

The fix is mechanical: move state down to the component that reads it. Delete the useState from the parent, drop the props you were drilling, and declare the state inside the consumer. The re-render footprint collapses to that consumer; the prop drilling disappears.

// colocated: state moved into its only reader
function InboxPage() {
  return (
    <Layout>
      <Sidebar />
      <ThreadList />
      <Composer />            {/* no props to drill */}
    </Layout>
  );
}

function Composer() {
  const [draft, setDraft] = useState("");   // home is where it's read
  return <textarea value={draft} onChange={(e) => setDraft(e.target.value)} />;
}

Now typing re-renders only <Composer>. <Sidebar> and <ThreadList> are inert during editing. No memo, no useCallback, no profiler hunt — just the right home for the state. Most “why is this re-rendering” bugs are a colocation bug in disguise, and moving state down fixes them at the source instead of patching symptoms with memoisation.

Lift up only when two components genuinely share state — and only to their nearest common ancestor. When two siblings must read or write the same value (a filter that both a <SearchBox> and a <Results> need), no single child can own it. Hoist it to the closest component that contains both, pass the value down, pass setters down. Closest — not the top of the app.

// shared: SearchBox writes the query, Results reads it → lift to their parent
function ProductSearch() {              // nearest common ancestor of both
  const [query, setQuery] = useState("");
  return (
    <>
      <SearchBox query={query} onChange={setQuery} />
      <Results query={query} />
    </>
  );
}

The rule is symmetric with colocation: as low as possible, but high enough to cover every reader. Lifting to the nearest common ancestor keeps the re-render boundary tight; lifting to the root makes the whole app the boundary — which is exactly the failure mode the next inset names.