Differences Between Functional Components and Class Components

In React, components are the building blocks of the user interface, and you can define them in two ways: Functional Components and Class Components. Both are used to build UI elements, but they differ in syntax, but they differ in syntax, state management, lifecycle methods, and other features.

With the introduction of React Hooks, functional components can now handle state and lifecycle methods, which were previously exclusive to class components.

Functional Components

A functional component is a simpler way to define components in React using JavaScript functions. Unlike class components, functional components do not require a constructor or lifecycle methods. They are typically used for components that are presentational and do not manage complex state or lifecycle events.

Syntax

const Car=()=> {
      return <h2>Hi, I am also a Car!</h2>;
}

import React, { useState } from "react";

const FunctionalComponent = () => {
    const [count, setCount] = useState(0);

    const increase = () => {
        setCount(count + 1);
    }

    return (
        <div style={{ margin: '50px' }}>
            <h1>Welcome to Geeks for Geeks </h1>
            <h3>Counter App using Functional Component : </h3>
            <h2>{count}</h2>
            <button onClick={increase}>Add</button>
        </div>
    )
}

export default FunctionalComponent;

Output

In this code

• Functional Component: FunctionalComponent uses useState to manage the count state, starting at 0.
• Increase Function: The increase function adds 1 to count when the button is clicked.
• UI: Displays a heading, current count, and an “Add” button to trigger the state update.

For more details follow this article => React Functional Components

Class Component

A class component is one of the two ways to define components in React, the other being functional components. Class components are ES6 classes that extend React.Component and can hold and manage internal state.

Syntax

class Car extends React.Component {
      render() {
        return <h2>Hi, I am a Car!</h2>;
      }
}

import React, { Component } from "react";

class ClassComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            count: 0
        };
        this.increase = this.increase.bind(this);
    }

    increase() {
        this.setState({ count: this.state.count + 1 });
    }

    render() {
        return (
            <div style={{ margin: '50px' }}>
                <h1>Welcome to Geeks for Geeks </h1>
                <h3>Counter App using Class Component : </h3>
                <h2> {this.state.count}</h2>
                <button onClick={this.increase}> Add</button>

            </div>
        )
    }
}

export default ClassComponent;

Output

In this code

• Class Component: ClassComponent extends React.Component.
• State: count state is initialized to 0 in the constructor.
• Increase Method: Increments count by 1 when the button is clicked.
• UI: Displays heading, count, and “Add” button.

For more details follow this article => React Class Components

Functional Components vs Class Components

Here is a detailed comparison of Functional Components and Class Components based on various features.

When to Use Each Component

Let’s compare Functional Components and Class Components and their usage:

Functional Components

Functional components are recommended for most new development due to their simplicity, performance, and flexibility.

• Recommended for most new development: Functional components, especially with hooks, are now the preferred choice for new React projects due to their simplicity, performance, and flexibility.
• Ideal for smaller components: If the component is simple and doesn’t need complex lifecycle methods or state management, a functional component is the best choice.
• Modern React development: Since React hooks were introduced, functional components are used extensively in modern React development.

Class Components

Class components are still used in legacy projects and for certain use cases involving lifecycle methods.

• Legacy code: Class components are still common in older React codebases. If you’re working with an existing project that uses class components, you may need to continue using them.
• Compatibility with third-party libraries: Some third-party libraries may still rely on class components or need to be used with class-based components.
• LifeCycle Methods: For components where lifecycle events like componentDidMount or componentDidUpdate are essential.

Note: Generally, we prefer using functional components in React due to their simplicity, especially with hooks for state and side effects management.

Conclusion

Functional Components are now the standard due to their simplicity, performance, and ability to manage state and lifecycle events with React Hooks. While Class Components are still used in legacy projects and third-party libraries, functional components are preferred for modern React development. Understanding both is important for maintaining older code and libraries.