React Class Components
Understanding class-based components in React
🎓 What are Class Components?
Class components are ES6 classes that extend React.Component. They were the primary way to create stateful components before React Hooks, and are still supported today.
class Welcome extends React.Component {
render() {
return <h1>Hello, Class Component!</h1>;
}
}
Class Component Features
State Management
Built-in state handling with this.state
this.state = {
count: 0
};Lifecycle Methods
Control component behavior at different stages
componentDidMount() {
// Code here
}Render Method
Required method that returns JSX
render() {
return <div>UI</div>;
}This Binding
Access component properties with this
this.props
this.state🔹 Basic Class Component
A class component must extend React.Component and include a render() method that returns JSX elements.
import React from 'react';
class Greeting extends React.Component {
render() {
return (
<div>
<h1>Hello from Class Component!</h1>
<p>This is a simple class component.</p>
</div>
);
}
}Output:
Hello from Class Component!
This is a simple class component.
🔹 Class Component with State
Class components can have internal state using this.state. State is initialized in the constructor and updated with this.setState().
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<h2>Count: {this.state.count}</h2>
<button>Increment</button>
</div>
);
}
}Output:
Count: 0
🔹 Updating State
Use this.setState() to update component state. Never modify state directly. React will re-render the component when state changes.
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
this.increment = this.increment.bind(this);
}
increment() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<h2>Count: {this.state.count}</h2>
<button onClick={this.increment}>
Increment
</button>
</div>
);
}
}Output:
Count: 0
Click button to increase count
🔹 Lifecycle Methods
Class components have lifecycle methods that run at specific times during a component's life. These help manage side effects and optimize performance.
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
// Runs after component is added to DOM
componentDidMount() {
this.interval = setInterval(() => {
this.setState({ seconds: this.state.seconds + 1 });
}, 1000);
}
// Runs before component is removed from DOM
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return <h2>Seconds: {this.state.seconds}</h2>;
}
}Output:
Seconds: 0
Timer starts automatically
🔹 Class vs Function Components
Modern React prefers function components with Hooks, but class components are still valid and widely used in existing codebases.
Class Component:
class Welcome extends React.Component {
render() {
return <h1>Hello!</h1>;
}
}Function Component (Equivalent):
function Welcome() {
return <h1>Hello!</h1>;
}🔹 Important Class Component Rules
Follow these guidelines when working with class components:
- Extend React.Component: Always extend from React.Component
- Call super(props): Required in constructor before using this
- Bind methods: Bind event handlers in constructor or use arrow functions
- Use setState(): Never modify this.state directly
- Render method: Must return JSX or null