Lifting State Up

In React, “Lifting State Up” is a core concept that allows multiple components to share and synchronize the same data. Instead of keeping state separately in child components, you “lift” it up to their nearest common parent so it can be passed down as props.

This approach helps maintain a single source of truth and ensures that all components using that data remain in sync.

What Does Lifting State Up Mean?

When two or more components need access to the same data, keeping the state in one of them can cause inconsistencies.

Instead, you can “lift” that state up to a parent component, which then manages the state and passes it down to children as props.

Why Lifting State Up Is Important

Lifting state up helps to:

• Avoid data duplication in multiple components
• Keep your app logic centralized and predictable
• Make debugging and state tracking easier
• Ensure synchronized UI updates when state changes

Example: Sharing Data Between Sibling Components

Let’s say you have two components:

• TemperatureInput – lets the user enter temperature in Celsius or Fahrenheit
• BoilingVerdict – displays whether the water would boil or not

Each of these needs the same temperature value — so we lift the state to a common parent.

Example Code:

import React, { useState } from "react";

// Child Component: Temperature Input
function TemperatureInput({ scale, temperature, onTemperatureChange }) {
  return (
    <fieldset>
      <legend>Enter temperature in {scale === "c" ? "Celsius" : "Fahrenheit"}:</legend>
      <inputvalue={temperature}
        onChange={(e) => onTemperatureChange(e.target.value)}
      />
    </fieldset>
  );
}

// Child Component: Boiling Verdict
function BoilingVerdict({ celsius }) {
  return (
    <p>
      {celsius >= 100 ? "The water would boil." : "The water would not boil."}
    </p>
  );
}

// Parent Component: Manages shared state
function Calculator() {
  const [temperature, setTemperature] = useState("");

  return (
    <div>
      <TemperatureInputscale="c"
        temperature={temperature}
        onTemperatureChange={setTemperature}
      />
      <BoilingVerdict celsius={parseFloat(temperature)} />
    </div>
  );
}

export default Calculator;

Key Principles of Lifting State Up

1. Single Source of Truth

   Keep the shared state in one place to avoid inconsistencies.

2. Data Flows Down, Events Flow Up

   • Parent passes state down as props.
   • Child sends updates up via callbacks.

3. Controlled Components

   Children become “controlled” by their parent — they rely entirely on props for their values.

When to Lift State Up

You should lift state up when:

• Two or more sibling components need the same data.
• You need to synchronize updates between components.
• The parent needs to perform logic based on child inputs.

When NOT to Lift State Up

Avoid lifting state up when:

• Only one component needs that data
• It causes unnecessary re-renders in multiple children
• The shared state grows too large — in that case, use Context API or Redux

Benefits of Lifting State Up

• Eliminates redundant or conflicting state
• Keeps data consistent across the app
• Simplifies debugging and testing
• Promotes better component reusability