What is the difference between class components and function components?
Why Interviewers Ask This
This is a classic screening question for React.js roles. Hiring managers ask it early in interviews to gauge your baseline understanding and determine if you can communicate technical concepts clearly.
Answer
Class components extend React.Component, use a render() method, manage state with this.state and this.setState(), use lifecycle methods, and require understanding of this. Function components are plain JavaScript functions that return JSX, manage state with hooks (useState), handle side effects with useEffect, and avoid this entirely. Why function components are preferred today: (1) Less boilerplate — no constructor, no binding event handlers. (2) Hooks are more composable — custom hooks allow sharing logic in ways mixins/HOCs could not. (3) Smaller bundle size — function components compile to less code. (4) Easier to read and test. (5) Better TypeScript integration. (6) React team focuses new features (Concurrent Mode, Server Components) on hooks. When class components are still needed: error boundaries (no hook equivalent yet), codebases that have not migrated. Class components are NOT deprecated — existing code will continue to work. But for all new development, function components with hooks are the standard.
Pro Tip
Before answering, structure your response: one-line definition → real-world analogy → concrete example from a project. This makes even complex React.js answers easy to follow.