Functional vs class components — which should you use and why?
Quick answer
Use functional components with hooks. Classes are legacy; functions are simpler, have less boilerplate, and hooks cover all class capabilities.
In detail
Function components are plain functions returning JSX; with hooks (useState, useEffect, etc.) they handle state, lifecycle, and context. Class components use this, lifecycle methods, and more boilerplate. Since React 16.8 (hooks), functional components are the standard for all new code. The only place classes still appear is error boundaries, which currently require a class.
1// function component (preferred)
2function Hello({ name }) { return <h1>Hi {name}</h1>; }
3
4// class equivalent (legacy)
5class Hello extends React.Component {
6 render() { return <h1>Hi {this.props.name}</h1>; }
7}Why interviewers ask this: Checks you are current with modern React, not stuck on classes.
Common follow-up questions
- →Why did hooks replace classes?
- →Where are classes still required?
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399