React Classes

In React, a class component is one of the two main ways to write components — the other being function components. A class component is built using ES6 JavaScript classes and is used when you need advanced features like state management or lifecycle methods.

Before React Hooks were introduced in 2019, class components were the main way to build powerful React apps. Even today, they are still used and important to understand.

What is a React Component?

React is all about components – small, reusable pieces that make up your UI. A React component can be:

• A function (called a functional component)
• A class (called a class component)

Here’s what a simple class component looks like:

import React, { Component } from 'react';

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

Basic Structure of a React Class

Let’s break it down:

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

• class Welcome – You define the class with a name (must start with a capital letter).
• extends Component – This means the class inherits from React.Component, giving it all React’s features.
• render() – Every class component must have a render method. It returns JSX (React’s HTML-like syntax) to display UI.

Props in Class Components

Just like function components, class components use props (short for properties) to receive data.

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

Here, this.props.name is how you access the prop value passed to the component.

Using State in Class Components

Unlike function components (before hooks), class components have a built-in way to manage state — a special object that holds dynamic data.

Example:

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

  render() {
    return <h2>Count: {this.state.count}</h2>;
  }
}

• constructor – Special method to initialize the component.
• this.state – Where we define local data.
• super(props) – Required when using constructor to make this.props available.

Changing State with setState()

You should never update state directly. Always use setState() to ensure React knows about the change and re-renders the component.

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

Full Example with Button:

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

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

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

Lifecycle Methods

Class components also have access to lifecycle methods, which let you run code at specific times during a component’s life (like when it mounts or updates).

Some common ones:

• componentDidMount() – Runs after the component is inserted into the DOM.
• componentDidUpdate() – Runs after a component updates.
• componentWillUnmount() – Runs before the component is removed.

Example:

class Timer extends Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentWillUnmount() {
    console.log('Component will be removed');
  }

  render() {
    return <h1>Timer Running</h1>;
  }
}

When to Use Class Components

Use a class component if:

• You need to manage state
• You want to use lifecycle methods
• You’re working with an older codebase

However, most modern React code uses function components with hooks, which are shorter and easier to manage.

Class vs Function Components (Quick Comparison)

Final Thoughts

React class components are an important part of React’s history and still show up in many codebases. They give you full control over your component’s state and lifecycle.

But with the introduction of React Hooks, function components have become the modern standard for building React apps.

Still, learning class components helps you understand React more deeply and prepares you to work with any kind of React project.

Example Recap

Here’s a small working example of a class component:

import React, { Component } from 'react';

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

export default Hello;