The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Lifting State Up

Next ►
►

In React, "lifting state up" refers to the practice of moving state from a child component to a common ancestor component. This is often necessary when multiple components need to share and synchronize state. By lifting the state up to the nearest common ancestor, you can ensure that all components have access to the same state and can update it consistently.

Why Lift State Up?

  • State Synchronization: When multiple components need to reflect the same state, lifting the state up ensures that they all stay in sync.
  • Single Source of Truth: It helps maintain a single source of truth for the state, making the application easier to debug and reason about.
  • Data Flow: It simplifies the data flow in your application, making it more predictable and easier to manage.

Example Scenario

Consider a scenario where you have two components: TemperatureInput and BoilingVerdict. The TemperatureInput component allows the user to input a temperature, and the BoilingVerdict component displays whether the water would boil at that temperature.

Step-by-Step Implementation

  1. Create the TemperatureInput Component

First, create a TemperatureInput component that accepts temperature input from the user.

import React from 'react';

function TemperatureInput(props) {
  const handleChange = (e) => {
    props.onTemperatureChange(e.target.value);
  };

  return (
    <fieldset>
      <legend>Enter temperature in {props.scale}:</legend>
      <input value={props.temperature} onChange={handleChange} />
    </fieldset>
  );
}

export default TemperatureInput;

  1. Create the BoilingVerdict Component

Next, create a BoilingVerdict component that displays whether the water would boil at the given temperature.

import React from 'react';

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>;
  }
  return <p>The water would not boil.</p>;
}

export default BoilingVerdict;

  1. Lift State Up to the Calculator Component

Now, create a Calculator component that will manage the state and pass it down to the TemperatureInput and BoilingVerdict components.

import React, { useState } from 'react';
import TemperatureInput from './TemperatureInput';
import BoilingVerdict from './BoilingVerdict';

function Calculator() {
  const [temperature, setTemperature] = useState('');

  const handleTemperatureChange = (temperature) => {
    setTemperature(temperature);
  };

  return (
    <div>
      <TemperatureInput
        scale="Celsius"
        temperature={temperature}
        onTemperatureChange={handleTemperatureChange}
      />
      <BoilingVerdict celsius={parseFloat(temperature)} />
    </div>
  );
}

export default Calculator;

Explanation

  • TemperatureInput Component: This component receives temperature and onTemperatureChange as props. It calls onTemperatureChange whenever the input value changes.
  • BoilingVerdict Component: This component receives celsius as a prop and displays whether the water would boil at that temperature.
  • Calculator Component: This component maintains the state (temperature) and passes it down to the TemperatureInput and BoilingVerdict components. It also defines the handleTemperatureChange function to update the state.

Practical Exercise

Exercise: Extend the Calculator component to include a second TemperatureInput for Fahrenheit and convert the temperatures between Celsius and Fahrenheit.

Solution:

import React, { useState } from 'react';
import TemperatureInput from './TemperatureInput';
import BoilingVerdict from './BoilingVerdict';

function toCelsius(fahrenheit) {
  return ((fahrenheit - 32) * 5) / 9;
}

function toFahrenheit(celsius) {
  return (celsius * 9) / 5 + 32;
}

function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);
  if (Number.isNaN(input)) {
    return '';
  }
  const output = convert(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

function Calculator() {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const handleCelsiusChange = (temperature) => {
    setTemperature(temperature);
    setScale('c');
  };

  const handleFahrenheitChange = (temperature) => {
    setTemperature(temperature);
    setScale('f');
  };

  const celsius =
    scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
  const fahrenheit =
    scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

  return (
    <div>
      <TemperatureInput
        scale="Celsius"
        temperature={celsius}
        onTemperatureChange={handleCelsiusChange}
      />
      <TemperatureInput
        scale="Fahrenheit"
        temperature={fahrenheit}
        onTemperatureChange={handleFahrenheitChange}
      />
      <BoilingVerdict celsius={parseFloat(celsius)} />
    </div>
  );
}

export default Calculator;

Summary

  • Lifting State Up: Moving state to a common ancestor component to share it among multiple child components.
  • Single Source of Truth: Ensures that the state is managed in one place, making the application easier to debug and maintain.
  • Data Flow: Simplifies the data flow and ensures that all components reflect the same state.

By lifting state up, you can create more predictable and maintainable React applications. This practice is essential for managing shared state and ensuring consistent behavior across your components.

◄ Previous
◄
Next ►
►

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application

The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved