State Lifting in React

State Lifting in React

When building a React application, different components often need to share the same data. Normally, each component can manage its own state using the useState hook. However, when multiple components need to access or update the same data, managing separate states can create synchronization problems. State lifting solves this problem by moving state to the nearest common parent component and sharing it with child components through props.

Why Do We Need State Lifting?

• Consider a shopping application with two components:
  Product: Allows users to add products to the cart.
  Cart: Displays the number of products added.

• If both components maintain separate states, updating the product count in one component will not automatically update the other.

• To solve this problem, we can move the shared state to their common parent component.

• The parent manages the state and passes the required data and functions to its children through props.

  State Lifting with an Example

  Consider the following component structure, where App is the parent component and Counter and Display are its children.
  

import { useState } from "react";

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

  return (
    <div>
      <Counter count={count} setCount={setCount} />
      <Display count={count} />
    </div>
  );
}

function Counter({ count, setCount }) {
  return (
    <div>
      <h2>Counter: {count}</h2>

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

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

export default App;

In this example, the App component creates the state using the useState hook. It passes the count value and setCount function to the Counter component and passes the count value to the Display component. When the user clicks the Increment button, the setCount function updates the state owned by App. React then re-renders the relevant components, allowing both components to display the updated count.

How Does State Lifting Work?

The execution flow of state lifting involves three important steps:

1. State creation: The parent component creates and manages the shared state using useState.
2. Passing props: The parent passes the state value and, when necessary, its setter function to child components.
3. State update: A child component calls the setter function to request an update. React updates the parent's state and re-renders the components that depend on the updated value.

The important point is that the child component does not directly modify the parent's state. Instead, it calls the setter function provided through props. The parent remains the owner of the state, maintaining a single source of truth for the shared data.

When Should We Use State Lifting?

State lifting is useful whenever multiple components need to work with the same data.
For example, a search input and a search results component can share a search query, while a product filter and a product list can share the selected category. Similarly, a shopping cart can share its data between product components and a cart summary.
However, state should not always be moved to the top-level component. It is generally better to keep state as close as practical to the components that use it. When many components across different levels of the component tree need the same data, the useContext hook can help avoid passing props through multiple intermediate components.

Comments

[Alex Shev]

The cart/count example makes the synchronization problem tangible. One useful boundary to add is that state should be lifted only to the nearest common owner that truly coordinates it; if unrelated branches start receiving the same value through many layers, context or a focused state store can avoid turning prop forwarding into the new coupling problem.