Class vs Functional Components in React
Modern React is written with functional components and hooks. Here's the difference and why the industry moved.
The difference
Class components use this, lifecycle methods and more boilerplate. Functional components are plain functions returning JSX; with hooks (useState, useEffect, etc.) they cover state, lifecycle and context with far less code.
1// functional (preferred)
2function Hello({ name }) { return <h1>Hi {name}</h1>; }
3// class (legacy)
4class Hello extends React.Component {
5 render() { return <h1>Hi {this.props.name}</h1>; }
6}Where classes still appear
Since hooks (React 16.8), functional components are the standard for all new code. The main place classes still show up is error boundaries, which currently require a class — and legacy codebases.
Get interview-ready on hooks
Every hook, the rules, and the patterns interviewers probe — with real code in the React Interview Kit.
⚡ Get the React Interview Kit → ₹399Frequently asked questions
- Why did hooks replace classes?
- Hooks let you reuse stateful logic without wrapper hell, avoid the confusion of this, and keep related setup/teardown together — simpler and less error-prone.
- Are class components deprecated?
- No, they still work and aren't going away. But new code should use functional components with hooks.