Class Components

Introduction

Before Hooks existed, class components were the only way to give a component internal state or respond to lifecycle events like "the component just appeared on screen." Function components were limited to simple, static UI. That is why older React code — and some libraries and tutorials still in use today — is full of classes.

You will rarely write a brand-new class component today, but understanding the syntax is essential for reading legacy codebases, older Stack Overflow answers, and some third-party libraries. This lesson walks through class syntax conceptually, without expecting you to use it going forward.

Writing a Class Component

A class component is a JavaScript class that extends React.Component and defines a render() method. Instead of returning JSX directly from a function, the JSX is returned from render().

class Welcome extends React.Component {
  render() {
    return <h1>Hello</h1>;
  }
}

Hello

this.props in Class Components

Just like function components receive props as an argument, class components receive props too — but they are accessed through this.props rather than a function parameter.

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

// Usage
<Welcome name="Amol" />

Hello, Amol!

Notice the "this." prefix is required in a class component, whereas a function component could simply destructure { name } directly from its parameter. This is one of the small but constant syntax differences between the two styles.

this.state and this.setState()

Class components can hold their own internal data using this.state, initialized in a constructor. To update it, you never modify this.state directly — instead you call this.setState(), which tells React to update the value and re-render the component. The full concept of state is covered in depth in the next lesson; here the focus is just on the class syntax used to work with it.

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

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        Count: {this.state.count}
      </button>
    );
  }
}

Lifecycle Methods (Brief Overview)

Class components expose special methods React calls automatically at specific moments in a component's life — when it first appears, when it updates, and when it is removed. A dedicated lifecycle lesson later in this course covers these in full detail; for now, just recognize their names and general purpose.

Why Modern React Prefers Function Components

Hooks (introduced in 2019) gave function components the same abilities class components had — state with useState, lifecycle-style behavior with useEffect — but with dramatically less boilerplate and none of the "this" binding pitfalls that commonly tripped up class component authors.

Example: A Small Class Component

Here is a self-contained class component combining props, state, and a lifecycle method, showing how these pieces fit together.

class Greeting extends React.Component {
  componentDidMount() {
    console.log('Greeting mounted for ' + this.props.name);
  }

  render() {
    return <h2>Hello, {this.props.name}!</h2>;
  }
}

// Usage
<Greeting name="Priya" />

Hello, Priya!
(console: "Greeting mounted for Priya")

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Class components were React's original way to add state and lifecycle behavior to a component, using this.props, this.state, this.setState(), and named lifecycle methods. While modern React favors function components with Hooks for their simplicity, class syntax still appears often enough in real-world code that recognizing it is a valuable skill.

In this lesson, you learned the class component syntax, how props and state are accessed with this, a brief overview of lifecycle methods, and why the React community shifted toward function components. Next, you will study props in much greater depth — the primary way data flows through a React application.