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.

// Filename App.js

import React from "react";

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

export default App;

React Class Components

Component Constructor

The constructor initializes state and binds methods. Always call super(props) before accessing this.

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

• Initializes the component’s state.
• Required when using this.state or binding methods.

Props in Class Components

Props allow data to flow from parent to child components and are accessible via this.props.

class Greet extends Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>;
    }
}

export default Greet;

React Class Component State

State is an object that determines the component’s behavior and rendering. Use setState to update it.

class Counter extends Component {
    state = { count: 0 };

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

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

export default Counter;

Lifecycle Methods

Lifecycle methods allow components to execute code at specific stages of their existence. Class components have access to the React lifecycle methodsThey 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

• Provide access to lifecycle methods for easy control.
• Allow state management without additional libraries.
• Still widely used in legacy React projects.

Limitations of Class Components

• Complex compared to functional components.
• ‘this’ keyword can be challenging for beginners.
• Functional components with Hooks are more performant in many cases.

React Class Components – FAQs

What is the main difference between class and functional components?

Class components use ES6 classes and provide lifecycle methods and state management, whereas functional components rely on functions and React Hooks for similar functionalities.

Why use a constructor in class components?

A constructor is used to initialize state and bind methods in class components. It ensures proper setup before the component is rendered.

How do you manage state in class components?

State is managed using the this.state object and updated using the this.setState() method.

What are lifecycle methods in class components?

Lifecycle methods are special functions like componentDidMount, componentDidUpdate, and componentWillUnmount that handle component behavior at different stages of its lifecycle.

Are class components still relevant with the advent of React Hooks?

Yes, class components are still relevant for working on legacy codebases and understanding React’s foundational concepts, though Hooks are preferred for new projects.

A

ArkadyutiBanerjee

Follow

Improve