React — Lifting State Up

Lifting state up means moving the state to the closest common ancestor of components that need to share that state.

This helps in synchronizing data between components.

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Child count={count} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function Child({ count }) {
  return <h2>Count: {count}</h2>;
}