React Class Components

Class components are ES6 classes that extend React.Component. They allow state management and lifecycle methods for complex UI logic.

• Used for stateful components before Hooks.
• Support lifecycle methods for mounting, updating, and unmounting.

The render() method in React class components returns JSX elements describing the UI of the Application.

Here is a simple class component in React

// Filename App.js
import React from "react";

class App extends React.Component {
    render() {
        return <h1>GeeksForGeeks</h1>;
    }
}

export default App;

React Class Components

Structure of React Class Components

A typical React class component consists of the following parts:

• Class Declaration: The component is declared as a class that extends React.Component. This inheritance gives the class access to React’s methods and properties.

class MyComponent extends React.Component { ... }

• Constructor: The constructor() method is used to initialize the component’s state and bind event handlers. It is optional, but if used, it must call super(props) to initialize the parent Component class.

constructor(props) {
    super(props);
    this.state = { count: 0 }; // Initialize state
}

• Render Method: The render() method is the only required method in a class component. It returns JSX, which represents the structure of the UI. Whenever the state or props change, the render() method is re-invoked.

render() {
    return <div>Current count: {this.state.count}</div>;
}

• State: Class components can manage their own internal state using the this.state property. The state is mutable and is used to store values that change over time, such as user input or API responses.

this.state = {
    count: 0
};

Event Handlers: Event handlers are typically methods in the class. They are used to handle user interactions like clicks, form submissions, etc. These methods often use this.setState() to update the component’s state.

increment = () => {
    this.setState({ count: this.state.count + 1 });
};

• Props in Class Components: Props allow data to flow from parent components to child components. They are accessible via this.props. Props cannot be changed by the component itself; they are controlled by the parent component.

class MyComponent extends React.Component {
    render() {
        return <div>{this.props.name}</div>; // Access props
    }
}

Lifecycle Methods

Lifecycle methods allow components to execute code at specific stages of their existence. Class components have access to the React lifecycle methods. They are divided into three phases:

1. Mounting

These methods run when a component is created and added to the DOM

• constructor() – Initializes state and props.
• componentDidMount() – Executes after the component is rendered to the DOM.

componentDidMount() {
    console.log('Component Mounted');
}

2. Updating

Called when a component’s state or props change

• shouldComponentUpdate() – Determines if a re-render is needed.
• componentDidUpdate() – Executes after the component updates.

componentDidUpdate(prevProps, prevState) {
    console.log('Component Updated');
}

3. Unmounting

This method runs when a component is removed from the DOM

• componentWillUnmount() – Cleans up resources like timers or event listeners.

componentWillUnmount() {
    console.log('Component Will Unmount');
}

Advantages of Class Components

• Lifecycle Access: Full access to lifecycle methods allows you to manage side effects, fetch data, and clean up resources.
• State Management: Class components can manage their internal state and trigger re-renders with this.setState().
• Widespread Use: Class components are still widely used in legacy projects, making knowledge of them valuable.

Limitations of Class Components

• Complexity: Compared to functional components, class components require more boilerplate code, including constructors and method binding.
• ‘this’ Keyword: The use of this can be confusing, especially for beginners, as it needs to be correctly bound in event handlers.
• Performance: Functional components with hooks can be more performant in some cases due to simpler structure and less overhead.