01 / 09

List all lifecycle methods.

Difficulty: 5/10
class component lifecycle, hooks useEffect, error boundaries

Lifecycle methods are available to class based components:

  1. 1

    constructor

  2. 2

    static getDerivedStateFromProps

  3. 3

    render()

  4. 4

    componentDidMount

  5. 5

    getSnapshotBeforeUpdate

  6. 6

    shouldComponentUpdate

  7. 7

    componentDidUpdate -> after the component updates

  8. 8

    componentWillUnmount() → cleanup when the component is unmounting

  9. 9

    componentDidCatch

Scenario Questions

0-2 years experience

  1. 1How would you add a console.log to see when a component mounts and when it unmounts?
  2. 2Which lifecycle method runs right after the first render, and what is it typically used for?
  3. 3What happens if you call setState inside componentWillUnmount?

2-5 years experience

  1. 1Your component fetches data in componentDidMount but you notice the request fires twice. Which lifecycle methods would you inspect to fix it?
  2. 2A child component re‑renders on every parent prop change even though it doesn’t need the new data. Which lifecycle method could you implement to prevent the extra renders?
  3. 3You’re replacing componentWillReceiveProps with getDerivedStateFromProps. What changes are required and what pitfalls should you watch for?

5-8 years experience

  1. 1Design a reusable error‑boundary component. Which lifecycle methods are essential and how do they interact with React’s error handling?
  2. 2You need a polling loop that starts on mount, stops on unmount, and pauses when the browser tab is hidden. Which lifecycle methods or hooks would you use and why?
  3. 3When optimizing a large list, how would you decide between using componentDidUpdate versus getSnapshotBeforeUpdate to measure DOM changes?

8+ years experience

  1. 1Your organization is migrating 200 class components to functional components with hooks. How would you plan the migration, ensuring lifecycle behavior stays equivalent and regressions are caught?
  2. 2Across several teams you need a consistent strategy for side‑effects and cleanup. What guidelines would you set for using useEffect versus class lifecycle methods, and how would you enforce them?
  3. 3If you must support both React 16.8 (with hooks) and older versions without hooks, how would you architect shared components to expose lifecycle behavior without duplicating code?

Follow-up Questions

  • Can you walk me through the exact order these methods run during mounting and updating?
  • Why were componentWillMount and componentWillReceiveProps deprecated, and what should be used instead?
  • When would you choose getSnapshotBeforeUpdate over componentDidUpdate?
Share

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