React Class Components

⚛️ React Class Components

A class component is a JavaScript class that extends React.Component and must have a render() method which returns JSX.

Basic Structure

class Welcome → defines the component
extends React.Component → inherits React component features
render() → returns the JSX to be displayed

Using Class Component

Class components can be reused just like functional components.

Props in Class Components

Props are accessed using this.props:

State in Class Components

Class components can maintain internal state.

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 }; // initialize state
}

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

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

class Counter extends React.Component {

constructor(props) {

super(props);

this.state = { count: 0 }; // initialize state

}

increment = () => {

this.setState({ count: this.state.count + 1 }); // update state

};

render() {

return (

<div>

<h2>Count: {this.state.count}</h2>

<button onClick={this.increment}>Increase</button>

</div>

);

}

this.state → stores component data
this.setState() → updates state and re-renders the component
Methods like increment often need to bind this (or use arrow functions)

Lifecycle Methods

Class components provide built-in lifecycle methods:

Method	When it runs
`constructor()`	Initialize state and props
`componentDidMount()`	After first render
`componentDidUpdate(prevProps, prevState)`	After state or props change
`componentWillUnmount()`	Before component is removed

Example:

class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { time: 0 };
}

componentDidMount() {
this.interval = setInterval(() => {
this.setState({ time: this.state.time + 1 });
}, 1000);
}

componentWillUnmount() {
clearInterval(this.interval);
}

render() {
return <h2>Time: {this.state.time}</h2>;
}
}

class Timer extends React.Component {

constructor(props) {

super(props);

this.state = { time: 0 };

}

componentDidMount() {

this.interval = setInterval(() => {

this.setState({ time: this.state.time + 1 });

}, 1000);

}

componentWillUnmount() {

clearInterval(this.interval);

}

render() {

return <h2>Time: {this.state.time}</h2>;

}

Advantages of Class Components

Access to state
Access to lifecycle methods
Works with props
Good for complex components (though now hooks replace most uses)

Modern Recommendation

Functional components with hooks are now preferred:
const Counter = () => { const [count, setCount] = React.useState(0); return <button onClick={() => setCount(count + 1)}>Count: {count}</button>; };
1
2
3
4
const Counter = () => {
const [count, setCount] = React.useState(0);
return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
};
Class components are still supported for legacy code.

🎯 Summary

Feature	Class Component	Functional Component
Syntax	`class X extends React.Component`	`function X() {}`
State	`this.state`	`useState` hook
Lifecycle	`componentDidMount`, `componentDidUpdate`	`useEffect` hook
`this` binding	Required for normal methods	Not needed
Modern usage	Less common	Preferred

React Class Components

⚛️ React Class Components

Basic Structure

Using Class Component

Props in Class Components

State in Class Components

Lifecycle Methods

Advantages of Class Components

Modern Recommendation

🎯 Summary

You may also like...

React Tutorial

React Hook

React Class Components

⚛️ React Class Components

Basic Structure

Using Class Component

Props in Class Components

State in Class Components

Lifecycle Methods

Advantages of Class Components

Modern Recommendation

🎯 Summary

You may also like...

React ES6 Classes

React ES6 Ternary Operator

React Conditional Rendering

React Tutorial

React Hook