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
JavaScript // 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');
}Lifecycle Method | Description |
|---|
componentWillMount() | used to implement server-side logic before the actual rendering happens, such as making an API call to the server |
componentDidMount() | allows us to execute the React code when the component is already placed in the DOM (Document Object Model) |
componentWillReceiveProps() | used to update the state in response to some changes in our props. |
componentWillUpdate() | provides us the control to manipulate our React component just before it receives new props or state values. |
shouldComponentUpdate() | allows us to exit the complex react update life cycle to avoid calling it again and again on every re-render. |
render() | used to display the component on the UI returned as HTML or JSX components. |
componentWillUnmount() | llows us to execute the React code when the component gets destroyed or unmounted from the DOM. |
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.
Similar Reads
React Components
In React, React components are independent, reusable building blocks in a React application that define what gets displayed on the UI. They accept inputs called props and return React elements describing the UI. In this article, we will explore the basics of React components, props, state, and rende
4 min read
What are Class Components in React?
Class components in React are fundamental building blocks for creating reusable, stateful, and interactive user interfaces. Unlike functional components, class components can manage their own state and lifecycle methods, making them a preferred choice for more complex applications before the introdu
3 min read
React MUI Components
React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based o
4 min read
ReactJS | Components - Set 2
In our previous article on ReactJS | Components we had to discuss components, types of components, and how to render components. In this article, we will see some more properties of components. Composing Components: Remember in our previous article, our first example of GeeksforGeeks's homepage whic
3 min read
React-Bootstrap Cards Component
Introduction: React-Bootstrap is a front-end framework that was designed keeping react in mind. Bootstrap was re-built and revamped for React, hence it is known as React-Bootstrap. Cards are a type of section or containers which consists of information in a structured and organized way. Creating Re
2 min read
ReactJS Pure Components
ReactJS Pure Components are similar to regular class components but with a key optimization. They skip re-renders when the props and state remain the same. While class components are still supported in React, it's generally recommended to use functional components with hooks in new code for better p
4 min read
Limitations of Class Components in React
Class Components in React are like the older, more formal way of building things. They involve more code and can be a bit complex compared to the newer, simpler functional components. Think of them as the traditional way of doing things in React. Limitations of Class Components in React1. Confusing
4 min read
How to create Class Component in React?
JavaScript syntax extension permits HTML-like code within JavaScript files, commonly used in React for defining component structure. It simplifies DOM element manipulation by closely resembling HTML syntax. JSX facilitates the creation of reusable UI building blocks, defined as JavaScript functions
2 min read
Are Class Components Still Useful in React?
Class components in React are the traditional method for creating components, utilizing ES6 class syntax. They manage state and lifecycle methods within a class structure. State Management: Class components handle state internally using this.state and update it with this.setState().Lifecycle Methods
4 min read
ReactJS Reactstrap Card Component
Reactstrap: Reactstrap is a popular front-end library that is easy to use React Bootstrap 4 components. This library contains the stateless React components for Bootstrap 4. The Card components allow the user to display content. We can use the following approach in ReactJS to use the ReactJS Reactst
5 min read