React Component Lifecycle — Complete Interview Guide

The Three Lifecycle Phases

Every React component, whether a class or a function, goes through three phases:

1. Mounting — the component is created and inserted into the DOM for the first time
2. Updating — the component re-renders because props or state changed
3. Unmounting — the component is removed from the DOM

Class components expose explicit lifecycle methods for each phase. Functional components achieve the same result through hooks — primarily useEffect, useState, and useRef. Both models produce identical behaviour; the syntax is just different.

Mounting Phase — Class Component

Four methods fire in this order when a class component first appears in the DOM:

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    // 1. FIRST — initialise state and bind methods
    // Do NOT call setState() or trigger side effects here
    this.state = { user: null, loading: true };
  }

  static getDerivedStateFromProps(props, state) {
    // 2. Called before EVERY render (mount and update)
    // Return an object to merge into state, or null to change nothing
    // Almost always the wrong tool — see Common Mistakes
    return null;
  }

  render() {
    // 3. The only required method — must return JSX
    // Must be PURE — no side effects, no setState calls
    const { user, loading } = this.state;
    if (loading) return <Spinner />;
    return <div>{user.name}</div>;
  }

  componentDidMount() {
    // 4. LAST — fires after the component is in the DOM
    // Safe to: fetch data, add event listeners, access DOM nodes via refs
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(user => this.setState({ user, loading: false }));
  }
}

Updating Phase — Class Component

When props or state change, this sequence fires:

  shouldComponentUpdate(nextProps, nextState) {
    // Called before re-render — return false to bail out and skip the render
    // React.PureComponent does a shallow prop/state comparison automatically
    // Only use this for measurable performance bottlenecks
    return nextProps.userId !== this.props.userId;
  }

  // render() fires again here

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Called right BEFORE the DOM is mutated (after render, before commit)
    // Whatever you return here is passed as the 3rd argument to componentDidUpdate
    // Classic use case: capture scroll position before a list grows
    if (prevProps.messages.length < this.props.messages.length) {
      return this.listRef.current.scrollHeight;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Called after every re-render and DOM update
    // ALWAYS guard setState calls with a condition — otherwise infinite loop
    if (prevProps.userId !== this.props.userId) {
      this.fetchUser(this.props.userId);
    }
    // snapshot is the value returned from getSnapshotBeforeUpdate
    if (snapshot !== null) {
      this.listRef.current.scrollTop =
        this.listRef.current.scrollHeight - snapshot;
    }
  }

Unmounting Phase — Class Component

  componentWillUnmount() {
    // Called just before the component is removed from the DOM
    // CLEAN UP everything: subscriptions, timers, event listeners, pending fetches
    // Do NOT call setState here — the component is being destroyed
    clearInterval(this.timerID);
    this.socket.close();
    window.removeEventListener('resize', this.handleResize);
  }

The Complete Class-to-Hooks Mapping

Functional components don't have lifecycle methods — they have effects. Every class lifecycle method maps directly to a hooks pattern:

constructor → useState / useRef initialisation

// Class
constructor(props) {
  super(props);
  this.state = { count: 0 };
}

// Hooks
const [count, setCount] = useState(0);

componentDidMount → useEffect with []

// Class
componentDidMount() {
  this.fetchUser(this.props.userId);
}

// Hooks — empty array = run once on mount
useEffect(() => {
  fetchUser(userId);
}, []);

componentDidUpdate → useEffect with deps

// Class
componentDidUpdate(prevProps) {
  if (prevProps.userId !== this.props.userId) {
    this.fetchUser(this.props.userId);
  }
}

// Hooks — the dependency array handles the comparison automatically
useEffect(() => {
  fetchUser(userId);
}, [userId]); // Re-runs whenever userId changes

componentWillUnmount → useEffect cleanup function

// Class
componentWillUnmount() {
  this.subscription.unsubscribe();
}

// Hooks — the returned function is the cleanup
useEffect(() => {
  const sub = subscribe(userId);
  return () => sub.unsubscribe(); // this IS componentWillUnmount
}, []);

shouldComponentUpdate → React.memo

// Class
shouldComponentUpdate(nextProps) {
  return nextProps.id !== this.props.id; // return false to skip re-render
}

// Hooks — React.memo wraps the component, comparator returns true to SKIP render
// (Note: the boolean is INVERTED compared to shouldComponentUpdate)
const UserCard = React.memo(({ id, name }) => {
  return <div>{name}</div>;
}, (prevProps, nextProps) => {
  return prevProps.id === nextProps.id; // true = props are equal, skip render
});

The comparator in React.memo returns true to skip re-render (props are equal). shouldComponentUpdate returns true to allow re-render. The logic is inverted — this trips up many candidates.

getSnapshotBeforeUpdate → useLayoutEffect + ref

// Hooks approximation — useLayoutEffect fires synchronously before paint
const scrollRef = useRef(null);
const prevLengthRef = useRef(messages.length);

useLayoutEffect(() => {
  if (messages.length > prevLengthRef.current) {
    // Restore scroll position after new messages are added
    scrollRef.current.scrollTop = scrollRef.current.scrollHeight - snapshot;
  }
  prevLengthRef.current = messages.length;
});

Error Lifecycle — The Only Reason to Still Write Class Components

Two lifecycle methods exist for catching errors thrown during rendering in child components. There is no hooks equivalent — you must write a class component as an Error Boundary:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    // Called during the render phase when a child throws
    // Return state update to show the fallback UI
    return { hasError: true, error };
  }

  componentDidCatch(error, info) {
    // Called in the commit phase after the fallback UI renders
    // Safe to log errors to an external service
    logToSentry(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong: {this.state.error.message}</div>;
    }
    return this.props.children;
  }
}

// Usage — wraps any subtree
<ErrorBoundary>
  <MyComplexFeature />
</ErrorBoundary>

Error Boundaries only catch errors in child components during rendering, lifecycle methods, and constructors. They do NOT catch errors in event handlers (use try/catch there) or async code.

The Deprecated Lifecycle Methods

Three methods were deprecated in React 16.3 and prefixed with UNSAFE_. They still work today but are removed in future React versions. Know them for interviews — many legacy codebases still use them:

• UNSAFE_componentWillMount — ran before mount; replace with constructor or useEffect(fn, [])
• UNSAFE_componentWillReceiveProps — ran when new props arrived; replace with getDerivedStateFromProps or useEffect(fn, [prop])
• UNSAFE_componentWillUpdate — ran before re-render; replace with getSnapshotBeforeUpdate

Why deprecated? React's concurrent rendering can start a render, pause it, and restart — running these methods multiple times before committing anything to the DOM. Any side effects inside them (data fetching, subscriptions) would fire multiple times unexpectedly, causing subtle bugs.

Functional Component Lifecycle — The Real Mental Model

Functional components don't technically have a "lifecycle" — every render is just a function call that returns JSX. The lifecycle emerges from effects and how React schedules them:

1. Mount: function runs → DOM updated → browser paints → useEffect(fn, []) fires
2. Update: function runs again → DOM updated → browser paints → useEffect(fn, [dep]) fires if dep changed → cleanup of previous effect runs first
3. Unmount: cleanup functions of all active effects run, in the order they were declared

If you have multiple useEffect calls in one component, they run top to bottom in the order they appear in the code.