Lifting State Up

When two components need the same data, move that state up into their closest shared parent. This is called lifting state up.

The parent owns the state and passes it down as props. Children ask the parent to change it by calling a function passed down as a prop.

• State lives in the common parent
• Values flow down through props
• Changes flow up through callback props

function Parent() {
  const [value, setValue] = React.useState(0);
  return <Child value={value} onAdd={() => setValue(value + 1)} />;
}