Class components are the older way of writing React components as ES6 classes extending React.Component, using this.state and lifecycle methods instead of hooks.

Syntax

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Deep Dive Course

A class component extends React.Component and must implement a render() method returning JSX; state lives on this.state, initialized in the constructor and updated exclusively through this.setState(), and side effects tied to the component's lifecycle are handled through dedicated methods like componentDidMount and componentDidUpdate rather than a single unified hook. Class components require careful attention to this binding, since a method like an event handler loses its automatic this context unless explicitly bound in the constructor or written as an arrow function class property — a common, easy-to-hit pitfall that functional components with hooks avoid entirely.

1Understanding Class Components

💡

If you inherit a codebase using class components, remember this.setState() merges the object you pass into existing state rather than replacing it entirely — unlike a functional component's useState setter, which fully replaces the state value unless you merge it yourself.

editor.html

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

// <Greeting name="Ana" />

localhost:3000

2Practical Example

Here is a real-world application of Class Components showing how it is used in production React code.

editor.html

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return <button onClick={this.handleClick}>Count: {this.state.count}</button>;
  }
}

localhost:3000

3Best Practices

Follow these guidelines when working with Class Components:

1. Bind event handler methods in the constructor, or write them as arrow function class properties, to avoid this being undefined when the handler is actually called

2. Remember this.setState() shallow-merges the provided object into existing state, unlike useState's setter, which replaces the value entirely

3. Recognize class components primarily when maintaining legacy code, since new components should be written as functional components with hooks instead

⚠️

Tip: If you inherit a codebase using class components, remember this.setState() merges the object you pass into existing state rather than replacing it entirely — unlike a functional component's useState setter, which fully replaces the state value unless you merge it yourself.

editor.html

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

// <Greeting name="Ana" />

localhost:3000

Examples

Example 01Basic Usage

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

// <Greeting name="Ana" />

Example 02Advanced Example

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return <button onClick={this.handleClick}>Count: {this.state.count}</button>;
  }
}

Best Practices

Bind event handler methods in the constructor, or write them as arrow function class properties, to avoid this being undefined when the handler is actually called
Remember this.setState() shallow-merges the provided object into existing state, unlike useState's setter, which replaces the value entirely
Recognize class components primarily when maintaining legacy code, since new components should be written as functional components with hooks instead

Interview Question

Why do event handler methods in a class component often need to be explicitly bound to 'this' in the constructor, while this isn't a concern in a functional component?▼

Hint: Think about how JavaScript determines the value of 'this' inside a regular method versus an arrow function, and how each kind of component defines its handler.

In JavaScript, a regular method's this value is determined by how the method is actually called, not where it was defined — when a class method like handleClick is passed as a callback, say to onClick, and later invoked by React internally, it's called as a plain, unbound function reference, losing the this context that would normally refer to the component instance, and instead becoming undefined. Explicitly binding the method to the instance in the constructor, this.handleClick = this.handleClick.bind(this), or defining it as an arrow function class property instead, both lock in this to always refer to the component instance regardless of how the function is later called. Functional components sidestep this problem entirely because they don't use this at all, they access state and props directly through the closure created by the function call itself, so there's no separate context object that could ever become detached from where a handler was originally defined.

Exercises

MediumPractice using Class Components in a real scenario.

View Solution

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

// <Greeting name="Ana" />

Frequently Asked Questions

Why do event handler methods in a class component often need to be explicitly bound to 'this' in the constructor, while this isn't a concern in a functional component?▼

Related Functions

functional-componentscomponentdidmountusestate