React  

What are React Components, and How Do Functional and Class Components Differ

Introduction

React components are the main building blocks for creating user interfaces in React. Think of them like Lego blocks; you can use small, reusable pieces to build big and complex structures. A component can be a button, a form, a header, or even an entire page. They help break down the UI into smaller parts, making the code easier to read, reuse, and maintain.

There are two main types of components.

  1. Functional Components
  2. Class Components

Functional Components

Functional components are simple JavaScript functions that return JSX (JavaScript XML), which looks like HTML but works inside JavaScript. They can accept props (short for properties), which are like inputs that help customize how the component looks or works.

Example

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
// Usage
<Greeting name="John" />

Description:

  • Props: Data sent to the component, like parameters to a function.
  • State with Hooks: Initially, functional components couldn’t manage their own data (state). Since React 16.8, Hooks like useState and useEffect allow them to store data and respond to changes.
  • Simplicity: They are shorter and easier to write.
  • Performance: Often faster than class components because they are lightweight.

With Hooks

import React, { useState } from 'react';

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

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

useState lets the component remember the count value and update it when the button is clicked.

Class Components

Class components are built using ES6 JavaScript classes. They extend React. Component has a special render() method that returns JSX. These components can also have their own data (state) and can use lifecycle methods.

Example

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
// Usage
<Greeting name="Jane" />

Description:

  • State: Stored in this state and can be updated using this.setState().
  • Lifecycle Methods: Special methods like componentDidMount (runs after the component is first displayed) and componentWillUnmount (runs before it is removed) to handle actions at specific points.
  • This keyword is required to access state and props.
  • More Code: Usually longer to write than functional components.

With State

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

In this example, the count value is stored inside the component and updated using this.setState.

Functional vs Class Components

Feature Functional Component Class Component
Syntax JavaScript function ES6 class
State Management Hooks (useState, useReducer) this. state
Lifecycle Methods Hooks (useEffect) componentDidMount, componentDidUpdate, etc.
Performance Generally faster Slightly slower due to more structure
this keyword Not used Required for state & props

Summary

React components are like small building blocks that combine to make complex UIs. Functional components are simple functions that can now handle state and side effects using Hooks, making them easier and faster to work with. Class components, on the other hand, use ES6 class syntax and have built-in lifecycle methods for more advanced control. Today, most developers prefer functional components because they are simpler, require less code, and are supported by powerful Hooks, but understanding both is important for working with new and old projects.

Membership not found