02 / 02

What are class components?

Difficulty: 3/10
state, lifecycle, binding
  1. 1

    A class component requires you to extend from React.Component and create a render function that returns a React element.

  2. 2

    Class components are based on ES6 classes and can have their own state and lifecycle methods.

Scenario Questions

0-2 years experience

  1. 1How would you turn a simple counter widget into a class component?
  2. 2What happens if you forget to bind an event handler in a class component?
  3. 3Where and how do you initialize state in a class component's constructor?

2-5 years experience

  1. 1We fetch data in componentDidMount, but the component leaks memory when unmounted. How would you fix it?
  2. 2Why does a class component re‑render when setState is called with the same value, and how can you avoid unnecessary renders?
  3. 3If a parent passes a new prop that doesn't affect rendering, what can you do to optimise the class component?

5-8 years experience

  1. 1Our dashboard has dozens of class components with complex lifecycle logic. How would you refactor them for better maintainability and testability?
  2. 2Discuss the trade‑offs between using shouldComponentUpdate and extending PureComponent in a large list rendering scenario.
  3. 3When doing server‑side rendering, what extra considerations do class components introduce compared to functional components with hooks?

8+ years experience

  1. 1Our codebase is 80% class components and we plan to migrate to hooks over the next few years. How would you design a migration strategy that minimizes risk and keeps teams productive?
  2. 2How would you create a shared base class for common behavior across many class components while avoiding tight coupling?
  3. 3What architectural implications arise when mixing class components and functional components in a large app, and how would you enforce consistency?

Follow-up Questions

  • Can you show a quick code snippet for that?
  • What would you change if you needed to add new props?
  • How does this affect testing the component?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.