How does lifting state up work in React, and when should you use this pattern?

Lifting state up means moving a piece of state from a child component up to their closest shared parent, so multiple sibling components can read and update the same data. This is needed whenever two components that do not directly relate to each other need to stay in sync with the same information.

function Parent() {
  const [selectedColor, setSelectedColor] = useState('blue');
  return (
    <>
      <ColorPicker selectedColor={selectedColor} onSelect={setSelectedColor} />
      <Preview color={selectedColor} />
    </>
  );
}