Choose one owner for each fact

First, build a mental model

State is a source of truth. If two components need to coordinate one fact, move that fact to their nearest useful shared owner and pass values and events down.

1. Store the minimal changing facts.
2. Derive values that can be calculated from current props/state.
3. Lift shared state to a common owner rather than synchronizing duplicate copies.
4. Context distributes access; it does not determine the right owner or replace authorization.

function Inventory({ items }) {
  const [query, setQuery] = useState('');
  const [selectedId, setSelectedId] = useState(null);
  const visible = items.filter(item => item.name.includes(query));
  const selected = items.find(item => item.id === selectedId) ?? null;
  return <InventoryView query={query} onQuery={setQuery}
    items={visible} selected={selected} onSelect={setSelectedId} />;
}

1. Stored

   query and selectedId are the independent changing facts.

2. Derived

   visible and selected are recalculated from the current source data.

3. Shared view

   The child receives one coherent set of values and callbacks.