Clean State

State should have one owner and one source of truth. Store the minimal facts that change over time; derive everything else.

R6: Local First

Keep state close to where it is used. Lift state only when multiple components need to read or change it.

// Bad - parent owns state used by one child
function Page() {
  const [isOpen, setIsOpen] = useState(false);
  return <DetailsPanel isOpen={isOpen} onOpenChange={setIsOpen} />;
}