Lifting State Up in React

Problem

Sibling components cannot directly share local state.

Solution: lift state up

Move shared state into parent and pass values/handlers via props.

function SearchPage() {
  const [query, setQuery] = useState('');
  return (
    <>
      <SearchBox query={query} onQueryChange={setQuery} />
      <ResultList query={query} />
    </>
  );
}

Benefits

• Single source of truth
• Predictable data flow
• Simpler debugging

When not enough

If many distant components need the same state, use Context or Redux.

Next, we will apply scalable context patterns.