Local, Lifted, and Global State

“Where should this state live?” is one of the most common architecture questions in frontend interviews. A good answer follows one rule: keep state as close as possible to where it is used, and move it up only when you must. The React docs on sharing state between components show how local, lifted, and global state relate.

1. Local state

State owned by a single component, such as whether a dropdown is open, the current value of an uncontrolled input, or a hover flag.

function Dropdown() {
  const [open, setOpen] = useState(false);
  ...
}

Benefits: only this component re-renders when it changes, and the logic is easy to delete or move.

2. Lifted state

When two siblings need the same data, move the state to their closest common parent and pass it down via props (plus callbacks to update it).

function Filters() {
  const [query, setQuery] = useState('');
  return (
    <>
      <SearchBox value={query} onChange={setQuery} />
      <Results query={query} />
    </>
  );
}

The cost: every component between the owner and the consumer re-renders and may need to forward props (“prop... premium content.