React Class Component: A Complete Guide (and React Class vs Functional Component)

04/19/2025

A React class component is one of the two primary ways to define a component in React. While functional components with Hooks have become the modern default, understanding the React class component is still essential for reading legacy codebases, migrating apps, and working with features like error boundaries. In this guide, I'll walk through what a React class component is, how it works, and compare React class vs functional component so you know which one to reach for.

What Is a React Class Component?

A React class component is a JavaScript ES6 class that extends React.Component and implements a render() method that returns JSX. Class components have access to local state via this.state, lifecycle methods like componentDidMount, and instance methods you can bind to event handlers.

Here's the simplest possible React class component:

import React from "react";

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

export default Welcome;

React Class Component with State

State in a React class component lives on this.state and is updated with this.setState(). Never mutate this.state directly — always use setState so React knows to re-render.

import React from "react";

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

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

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

export default Counter;

Lifecycle Methods in a React Class Component

Lifecycle methods are one of the biggest reasons a React class component can still be useful. The most common ones are:

componentDidMount() — runs once after the component mounts. Great for fetching data or setting up subscriptions.
componentDidUpdate(prevProps, prevState) — runs after every update (but not the initial render).
componentWillUnmount() — runs right before the component is removed. Use it to clean up timers, listeners, or subscriptions.
shouldComponentUpdate(nextProps, nextState) — lets you skip re-renders for performance.
getDerivedStateFromProps() and getSnapshotBeforeUpdate() — advanced, less common.

class UserProfile extends React.Component {
  state = { user: null };

  componentDidMount() {
    fetch(`/api/users/${this.props.id}`)
      .then((res) => res.json())
      .then((user) => this.setState({ user }));
  }

  componentWillUnmount() {
    // clean up here
  }

  render() {
    const { user } = this.state;
    if (!user) return <p>Loading…</p>;
    return <h2>{user.name}</h2>;
  }
}

React Class vs Functional Component

So when should you use a React class component vs a functional component? Here's a side-by-side breakdown of React class vs functional component:

Syntax

A functional component is just a function that returns JSX. A React class component is a class that extends React.Component and has a render() method. Functional components are shorter and easier to read.

// Functional component
function Welcome({ name }) {
  return <h1>Hello, {name}</h1>;
}

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

State

React class component uses this.state and this.setState. Functional components use the useState Hook. Hooks let you split state into multiple independent variables, which is often cleaner than one big state object.

Lifecycle

A React class component uses dedicated lifecycle methods. A functional component uses the useEffect Hook to cover mounting, updating, and unmounting — usually with less code.

Performance

Both approaches perform similarly in most real-world apps. Functional components can be optimized with React.memo, and class components with shouldComponentUpdate or PureComponent.

Readability and Reusability

Functional components with custom Hooks make it much easier to extract and reuse logic across components. In a React class component, the equivalent patterns (higher-order components, render props) tend to produce deeply nested "wrapper hell."

`this` Binding

A React class component forces you to think about this — you typically bind event handlers in the constructor or use class field arrow functions. Functional components don't have a this, so this whole category of bugs simply goes away.

When Should You Still Use a React Class Component?

Error boundaries. As of today, error boundaries still require a class component because they rely on componentDidCatch and getDerivedStateFromError.
Legacy codebases. If your team's code is mostly class components, consistency can be more valuable than mixing styles.
Learning React's history. Understanding the React class component makes lifecycle-aware thinking click, which transfers directly to useEffect.

Converting a React Class Component to a Functional Component

Most React class components can be rewritten as functional components using Hooks. A quick cheat sheet:

this.state + this.setState → useState
componentDidMount → useEffect(fn, [])
componentDidUpdate → useEffect(fn, [deps])
componentWillUnmount → the cleanup function returned from useEffect
this.context → useContext
Instance variables → useRef

// Before: React class component
class Counter extends React.Component {
  state = { count: 0 };
  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }
  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }
  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        {this.state.count}
      </button>
    );
  }
}

// After: functional component with Hooks
function Counter() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

React Class Component FAQ

Is the React class component deprecated?

No. The React team has repeatedly said they have no plans to remove class components. They are still fully supported in the latest versions of React. That said, new features and most documentation are focused on Hooks and functional components.

Can a React class component use Hooks?

No — Hooks can only be called inside functional components or other custom Hooks. If you need Hook-style logic inside a class, you'll need to wrap it with a small functional component or refactor.

React class vs functional component: which is faster?

For almost every app, the difference is negligible. Focus on correctness, readability, and reusability first. Profile only if you have a measured performance problem.

Conclusion

The React class component isn't going anywhere, but functional components with Hooks are the modern default. Use a class component when you need an error boundary or are working in a class-heavy codebase, and reach for functional components everywhere else. Once you've internalized the React class vs functional component trade-offs, you can pick the right tool for each job with confidence.

If you found this React class component guide helpful, feel free to reach out on LinkedIn — I'd love to hear what you're building.