Class Components in React
Before React Hooks arrived in 2019, **class components** were the only way to create components that had their own state and lifecycle methods. While functional components are now the recommended approach, you will still encounter class components in older codebases, and understanding them is essential for maintaining legacy React applications.
What is a Class Component?
A class component is an ES6 class that extends `React.Component`. It must contain a `render()` method, which returns JSX. Class components can have state, lifecycle methods, and access to `this` context.
Class components were originally called 'stateful' or 'container' components because they could hold and manage state.
Basic Syntax
import React from 'react';
class Greeting extends React.Component { render() { return <h1>Hello, World!</h1>; }}
export default Greeting;Class Components with Props
Props are accessed using `this.props` inside the class.
class Greeting extends React.Component { render() { return <h1>Hello, {this.props.name}!</h1>; }}
function App() { return <Greeting name="Bob" />;}State in Class Components
State is managed in a `state` object and updated using `this.setState()`.
class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; }
increment = () => { this.setState({ count: this.state.count + 1 }); }
render() { return ( <div> <p>Count: {this.state.count}</p> <button onClick={this.increment}>Increment</button> </div> ); }}Lifecycle Methods
Class components have special lifecycle methods that run at different stages (mounting, updating, unmounting). Common ones include:
- componentDidMount(): Runs after component first appears on screen (good for API calls).
- componentDidUpdate(): Runs after component updates.
- componentWillUnmount(): Runs before component is removed (cleanup).
componentDidMount() { console.log('Component mounted!');}When to Use Class Components Today?
- Legacy Code: Maintaining older React applications.
- Error Boundaries: Only class components can currently be error boundaries (components that catch JavaScript errors).
- Personal Preference: Some developers still prefer class syntax (though this is rare now).
For all new development, functional components with hooks are the recommended approach.
Two Minute Drill
- Class components are ES6 classes that extend `React.Component`.
- They must have a `render()` method that returns JSX.
- Props are accessed via `this.props`.
- State is stored in `this.state` and updated with `this.setState()`.
- They have lifecycle methods like `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`.
- Class components are older style; functional components with hooks are now preferred for new code.
- You'll still see them in legacy codebases and error boundaries.
Need more clarification?
Drop us an email at career@quipoinfotech.com