Class Component Deep Dive

Class components are ES6 classes that extend the React.Component base class. They are used to define React components with state and lifecycle methods. Unlike functional components, class components have access to more advanced features like state management and lifecycle hooks without requiring additional tools like React Hooks.​

Structure of a Class Component

A class component must:

• Extend React.Component or React.PureComponent.
• Include a render() method that returns JSX (JavaScript XML) to define the UI.

Basic Example of a Class Component:

​import React, { Component } from 'react';
class Welcome extends Component {
render() {
return<h1>Hello, {this.props.name}!</h1>;
  }
}
export default Welcome;

In this example:

• The Welcome class extends React.Component.
• The render() method returns JSX to display the UI.
• props are used to pass data from the parent component.

Key Features of Class Components

​1. State Management​

Class components can manage their own state using the this.state object. The state is mutable and can be updated using the setState() method.

​class Counter extends Component {  
constructor(props) {    
super(props);    
this.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;

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

3. Lifecycle Methods​

Class components have access to lifecycle methods, which allow developers to hook into different stages of a component's lifecycle (mounting, updating, and unmounting).

Lifecycle Methods in Class Components

​React class components have three main phases in their lifecycle:

1. Mounting Phase

This phase occurs when a component is being created and inserted into the DOM.

• constructor(): Initializes the component's state and binds methods.
• static getDerivedStateFromProps(): Updates the state based on props before rendering.
• render(): Returns the JSX to be rendered.
• componentDidMount(): Executes after the component is mounted. Commonly used for API calls or DOM manipulations.

​class App extends Component {  
constructor(props) {    
super(props);    
this.state = { data: null };  
}  
componentDidMount() {    
fetch('https://api.example.com/data')      
.then((response) => response.json())      
.then((data) => this.setState({ data }));  
}  
render() {    
return <div>Data: {this.state.data}</div>;  
}
}

​

2. Updating Phase

This phase occurs when a component's state or props change.

• static getDerivedStateFromProps(): Updates the state based on props.
• shouldComponentUpdate(): Determines whether the component should re-render. Useful for performance optimization.
• render(): Re-renders the component.
• getSnapshotBeforeUpdate(): Captures some information (e.g., scroll position) before the DOM is updated.
• componentDidUpdate(): Executes after the component updates. Commonly used for side effects like API calls.

​class Counter extends Component {  
componentDidUpdate(prevProps, prevState) {    
if (prevState.count !== this.state.count) {      
console.log('Count updated:', this.state.count);    
}  
}
 render() {    
return <div>Count: {this.state.count}</div>;  
}
}

​

3. Unmounting Phase

This phase occurs when a component is removed from the DOM.

• componentWillUnmount(): Executes before the component is unmounted. Commonly used for cleanup tasks like removing event listeners or canceling API calls.

​class Timer extends Component {  
componentWillUnmount() {    
clearInterval(this.timer);  
}  
render() {    
return <div>Timer Component</div>;  
}
}

​

Conclusion

​Class components are a fundamental part of React and provide powerful features like state management, lifecycle methods, and error boundaries. While functional components with hooks have largely replaced class components in modern React development, understanding class components is essential for working with legacy codebases and certain advanced use cases. By mastering class components, developers can gain a deeper understanding of React's core concepts and build robust, maintainable applications.