Lifting state up is a fundamental React concept used when multiple components need to share or depend on the same data. In React, each component manages its own state. However, problems arise when two or more components need to reflect the same changing data. Because React does not allow direct data sharing between sibling components, the solution is to move the shared state to their closest common parent. This process is called lifting state up.

The core idea behind lifting state up is single source of truth. Instead of duplicating the same state in multiple components, the state is stored in one place (the parent), and child components receive the data and update functions via props.

Problem Without Lifting State Up

Consider two sibling components: one takes user input and the other displays it.

function InputBox() {
  const [text, setText] = React.useState("");
  return <input onChange={e => setText(e.target.value)} />;
}

function Display() {
  return <p>Text will appear here</p>;
}

In this setup, the Display component cannot access the state from InputBox. The components are isolated and cannot stay in sync.

Solution: Lifting State Up

To solve this, move the state to the parent component and pass it down as props.

function InputBox({ onChange }) {
  return <input onChange={e => onChange(e.target.value)} />;
}

function Display({ value }) {
  return <p>{value}</p>;
}

function Parent() {
  const [text, setText] = React.useState("");

  return (
    <>
      <InputBox onChange={setText} />
      <Display value={text} />
    </>
  );
}

Here, the Parent component holds the state. The InputBox updates the state using a callback, and the Display component receives the updated value as a prop. Both components stay in sync because they rely on the same state source.

Why Lifting State Up Is Important

Lifting state up ensures consistent data across components. It prevents bugs caused by duplicated or unsynchronized state. It also makes application logic easier to understand, since there is a clear owner of the data.

Real-World Scenario

In a real-world form-based application, one component may handle user input while another component shows a live preview. For example, a resume form component captures user details, and a preview component displays the formatted resume in real time. By lifting state up to a common parent, both components stay updated as the user types.

Another common example is filters and lists. A filter component updates selected criteria, and a list component displays filtered results. The filter state is lifted up so both components can access and react to changes.

Important Notes and Best Practices

Lift state only when necessary. Do not lift state higher than needed, as this can make components harder to reuse. Keep state as close as possible to where it is used, but lift it when multiple components depend on it.

When lifting state up results in passing props through many layers, it may indicate the need for alternative patterns such as context. However, lifting state up remains the simplest and most recommended approach for sharing state between a small number of related components.

In summary, lifting state up is a key React pattern that enables components to share data through a common parent. It promotes a single source of truth, improves consistency, and is essential for building reliable and maintainable React applications.