Functional vs Class Components in React
Compare functional and class components in React: Hooks vs lifecycle methods, this binding, and when to use each — with a clear side-by-side code example.
Expected Interview Answer
Functional components are plain JavaScript functions that return JSX and use Hooks for state and lifecycle, while class components are ES6 classes that use this.state, setState, and lifecycle methods like componentDidMount.
Since React 16.8, Hooks gave functional components full access to state, side effects, context, and refs, so they can do everything class components can — usually with less boilerplate and no confusing this binding. Functional components are now the recommended default; class components remain valid mainly for legacy code and error boundaries, which still require a class.
- Less boilerplate and no this binding
- Hooks enable reusable stateful logic
- Easier to read and test
- Better tree-shaking and smaller bundles
- Recommended default in modern React
AI Mentor Explanation
A class component is like a full team manager who inherits a fixed rulebook of set methods — team selection, batting order, drinks break — each a rigid stage. A functional component is like a nimble all-rounder who picks only the skills (Hooks) the match needs that day, batting, bowling or fielding on demand without carrying the whole rulebook.
Step-by-Step Explanation
Step 1
Define the shape
A functional component is a function returning JSX; a class component extends React.Component with a render() method.
Step 2
Add state
Functional components use the useState Hook; class components use this.state and this.setState.
Step 3
Handle lifecycle
Functional components use useEffect for mount, update and cleanup; class components use componentDidMount, componentDidUpdate and componentWillUnmount.
Step 4
Avoid this pitfalls
Functional components have no this to bind; class methods often need binding or arrow functions to keep the correct this.
Step 5
Choose the default
Prefer functional components with Hooks for new code; reach for a class only for legacy code or error boundaries.
What Interviewer Expects
- Knowing Hooks made functional components fully capable
- Mapping lifecycle methods to useEffect
- Understanding this binding problems in classes
- Awareness that error boundaries still need classes
- A clear recommendation to default to functional components
Common Mistakes
- Claiming functional components cannot hold state
- Saying Hooks work inside class components
- Forgetting error boundaries require a class
- Confusing useEffect cleanup with componentWillUnmount only
- Calling a Hook conditionally or inside a loop
Best Answer (HR Friendly)
“Functional components are simpler functions that use Hooks to manage data and behaviour, while class components are older-style classes that do the same with more code. Modern React prefers functional components because they are shorter, easier to read, and just as powerful.”
Code Example
// Functional component with Hooks
import { useState, useEffect } from 'react'
function Counter() {
const [count, setCount] = useState(0)
useEffect(() => {
document.title = `Count: ${count}`
}, [count])
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
// Equivalent class component
import { Component } from 'react'
class CounterClass extends Component {
state = { count: 0 }
componentDidUpdate() {
document.title = `Count: ${this.state.count}`
}
render() {
return (
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
{this.state.count}
</button>
)
}
}Follow-up Questions
- How do Hooks replace lifecycle methods like componentDidMount?
- Why does React still require classes for error boundaries?
- What problems does the this keyword cause in class components?
- What are the Rules of Hooks and why do they exist?
- When would you still choose a class component today?
MCQ Practice
1. Which feature let functional components manage state and side effects?
Hooks, introduced in React 16.8, gave functional components access to state, effects, context and more.
2. Which lifecycle method's behaviour does useEffect combine?
useEffect can run on mount and updates, and its returned cleanup function handles unmount logic.
3. Which of these still requires a class component in React?
Error boundaries rely on componentDidCatch/getDerivedStateFromError, which have no Hook equivalent yet.
Flash Cards
How does a functional component hold state? — With the useState Hook, which returns the current value and a setter function.
How does a class component hold state? — Through this.state for the value and this.setState to update it.
What replaces lifecycle methods in functional components? — The useEffect Hook, whose dependency array and cleanup cover mount, update and unmount.
What must still be a class in React? — Error boundaries, since they need componentDidCatch and getDerivedStateFromError.