mediumFrontend

When would you choose a class component over a functional component with hooks?

Q: When would you choose a class component over a functional component with hooks?

**Core concept (TL;DR).** Almost never for new code — **function components with hooks** are the modern standard. The one thing classes still do that hooks can't is be an **Error Boundary** (which needs componentDidCatch / getDerivedStateFromError ). Otherwise you'd only touch classes to maintain **legacy** code. Hooks are default; classes are the exception function + hooks <te

610 views

Understand the problem

Although functional components with hooks are preferred, identify scenarios where a class component might still be necessary or advantageous.

class componentsfunctional componentshookslegacy

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

The one class you still write: an Error Boundary

import { Component } from "react";

class ErrorBoundary extends Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(error, info) { console.error(error, info); }
  render() {
    return this.state.hasError ? <p>Something went wrong.</p> : this.props.children;
  }
}

function Boom() { throw new Error("render error"); }

export default function App() {
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <ErrorBoundary><Boom /></ErrorBoundary>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you handle forms in React?

What is 'prop drilling' and how can it be avoided?