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.
\nA 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:
\nimport React from \"react\";\n\nclass Welcome extends React.Component {\n render() {\n return <h1>Hello, {this.props.name}</h1>;\n }\n}\n\nexport default Welcome;\nState 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\";\n\nclass Counter extends React.Component {\n constructor(props) {\n super(props);\n this.state = { count: 0 };\n this.increment = this.increment.bind(this);\n }\n\n increment() {\n this.setState((prevState) => ({ count: prevState.count + 1 }));\n }\n\n render() {\n return (\n <div>\n <p>Count: {this.state.count}</p>\n <button onClick={this.increment}>+1</button>\n </div>\n );\n }\n}\n\nexport default Counter;\nLifecycle methods are one of the biggest reasons a React class component can still be useful. The most common ones are:
\nclass UserProfile extends React.Component {\n state = { user: null };\n\n componentDidMount() {\n fetch(`/api/users/${this.props.id}`)\n .then((res) => res.json())\n .then((user) => this.setState({ user }));\n }\n\n componentWillUnmount() {\n // clean up here\n }\n\n render() {\n const { user } = this.state;\n if (!user) return <p>Loading…</p>;\n return <h2>{user.name}</h2>;\n }\n}\nSo 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:
\nA 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\nfunction Welcome({ name }) {\n return <h1>Hello, {name}</h1>;\n}\n\n// React class component\nclass Welcome extends React.Component {\n render() {\n return <h1>Hello, {this.props.name}</h1>;\n }\n}\nReact 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.
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.
Both approaches perform similarly in most real-world apps. Functional components can be optimized with React.memo, and class components with shouldComponentUpdate or PureComponent.
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.\"
\nA 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.
componentDidCatch and getDerivedStateFromError.useEffect.Most React class components can be rewritten as functional components using Hooks. A quick cheat sheet:
\nthis.state + this.setState → useStatecomponentDidMount → useEffect(fn, [])componentDidUpdate → useEffect(fn, [deps])componentWillUnmount → the cleanup function returned from useEffectthis.context → useContextuseRef// Before: React class component\nclass Counter extends React.Component {\n state = { count: 0 };\n componentDidMount() {\n document.title = `Count: ${this.state.count}`;\n }\n componentDidUpdate() {\n document.title = `Count: ${this.state.count}`;\n }\n render() {\n return (\n <button onClick={() => this.setState({ count: this.state.count + 1 })}>\n {this.state.count}\n </button>\n );\n }\n}\n\n// After: functional component with Hooks\nfunction Counter() {\n const [count, setCount] = React.useState(0);\n React.useEffect(() => {\n document.title = `Count: ${count}`;\n }, [count]);\n return <button onClick={() => setCount(count + 1)}>{count}</button>;\n}\nNo. 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.
\nNo — 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.
\nFor almost every app, the difference is negligible. Focus on correctness, readability, and reusability first. Profile only if you have a measured performance problem.
\nThe 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.
\nIf you found this React class component guide helpful, feel free to reach out on LinkedIn — I'd love to hear what you're building.
","frontmatter":{"title":"React Class Component: A Complete Guide (and React Class vs Functional Component)","date":"04/19/2025","excerpt":"Everything you need to know about the React class component — syntax, lifecycle methods, state, and when to choose a React class component vs a functional component in modern React."}}},"pageContext":{"slug":"/react-class-component-guide/"}},"staticQueryHashes":["3943644438"]}