Introduction

Welcome to Module 8! In this module, we'll explore two important concepts in React: lifting state up and composition vs. inheritance. Understanding these concepts will help you create more organized and maintainable code, making your applications easier to manage as they grow. By the end of this module, you'll be able to efficiently share state between components and design your React applications using the composition model.

Key Concepts

1. Lifting State Up

Lifting state up is a technique used to share state between multiple components. Instead of each component managing its own state, you "lift" the state up to the nearest common ancestor, which then passes the state down to its children via props. This ensures that all components have access to the same state and can stay in sync.

Example: Lifting State Up

Let's create two components: TemperatureInput and TemperatureDisplay. We'll lift the state up to a parent component called TemperatureConverter.

import React, { useState } from 'react';

function TemperatureInput({ temperature, onTemperatureChange }) {
  return (
    <div>
      <label>
        Enter temperature:
        <input
          type="text"
          value={temperature}
          onChange={(e) => onTemperatureChange(e.target.value)}
        />
      </label>
    </div>
  );
}

function TemperatureDisplay({ temperature }) {
  return (
    <div>
      <h2>The temperature is {temperature}°C</h2>
    </div>
  );
}

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

  return (
    <div>
      <TemperatureInput
        temperature={temperature}
        onTemperatureChange={setTemperature}
      />
      <TemperatureDisplay temperature={temperature} />
    </div>
  );
}

export default TemperatureConverter;

In this example, the temperature state is lifted up to the TemperatureConverter component, which manages the state and passes it down to TemperatureInput and TemperatureDisplay via props. This way, both components can access and update the same state.

2. Composition vs. Inheritance

React encourages using composition over inheritance to reuse code between components. Composition involves building components out of smaller, reusable pieces and combining them to create more complex components. This approach is more flexible and easier to manage than inheritance, where one component inherits properties and methods from another.

Example: Composition

Let's create a Card component that can be composed with other components to create different types of cards.

import React from 'react';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

function WeatherCard() {
  return (
    <Card>
      <h2>Weather Forecast</h2>
      <p>Sunny, 25°C</p>
    </Card>
  );
}

function NewsCard() {
  return (
    <Card>
      <h2>Latest News</h2>
      <p>React 19 released!</p>
    </Card>
  );
}

export default function Dashboard() {
  return (
    <div>
      <WeatherCard />
      <NewsCard />
    </div>
  );
}

In this example, the Card component is a reusable container that can be used to create different types of cards, such as WeatherCard and NewsCard. This demonstrates how composition allows you to build complex UIs by combining simpler components.

Explain Like You Are 10

Lifting State Up: Imagine you and your friends are playing a game, and you all need to know the same score. Instead of each person keeping track of their own score, you have one person who keeps track of the score and tells everyone. This way, everyone has the same score, and no one gets confused.

Composition vs. Inheritance: Think of building with LEGO blocks. Instead of using one big piece (inheritance), you use many smaller blocks to build something cool (composition). This way, you can easily change and reuse the smaller blocks to build different things.

Wrap Up

In this module, we've covered the basics of lifting state up and the composition model in React. By lifting state up, you can share state between multiple components, ensuring they stay in sync. Using composition, you can build complex UIs by combining smaller, reusable components, making your code more flexible and maintainable. Next, you'll apply these concepts to build a Weather Dashboard that shows weather forecasts for multiple locations. Happy coding!