What is the difference between function components and class components, and which should you use today?
Function components are plain functions that use hooks for state and lifecycle behaviour. Class components use this.state and lifecycle methods. New code should use function components; classes still work, and error boundaries still need a class.
Explain it simply
A class component is a bulky toolbox with this, a constructor and named lifecycle methods. A function component is the same tool in a pocket-size form: a function that takes props and returns JSX, with hooks adding state and effects.
Hooks let you group code by feature instead of splitting it across componentDidMount, componentDidUpdate and componentWillUnmount. Function components also avoid this binding mistakes.
For an interview, also know the lifecycle mapping: componentDidMount is roughly an effect with an empty dependency array, componentDidUpdate is an effect with dependencies, and componentWillUnmount is the cleanup function returned from an effect.
Example
class Counter extends React.Component {
state = { n: 0 };
render() {
return <button onClick={() => this.setState({ n: this.state.n + 1 })}>{this.state.n}</button>;
}
}
function Counter2() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}What to say in the interview
"Both can build the same UI. Function components with hooks are the modern default: less boilerplate, no this, and logic is easier to reuse through custom hooks. Class components are not removed, and you will meet them in old codebases. One current reason to write a class is an error boundary, since there is no hook for that."
Common mistakes
- Saying classes are deprecated; they are supported, just not recommended for new code.