Mastering React’s New Lifecycle Methods: A Complete Guide

Introduction

Since React v16, performance and new APIs have become prominent, and the lifecycle has been revised to support async rendering and avoid misuse.

New Lifecycle Overview

React 16.3 added two new lifecycle methods:

getDerivedStateFromProps()

getSnapshotBeforeUpdate()

Older lifecycle methods are gradually deprecated but remain with UNSAFE_ prefixes for backward compatibility.

In v16.3 the three legacy methods (componentWillMount, componentWillReceiveProps, componentWillUpdate) are not removed; they are renamed with an UNSAFE_ prefix. Warnings appear in v16.4 and the methods are removed in v17.

Lifecycle Phases

Mounting

constructor()

static getDerivedStateFromProps()

componentWillMount()/UNSAFE_componentWillMount()

render()

componentDidMount()

The constructor initializes state and binds event handlers. If getDerivedStateFromProps is defined, componentWillMount is skipped.

Updating

componentWillReceiveProps()/UNSAFE_componentWillReceiveProps()

static getDerivedStateFromProps()

shouldComponentUpdate()

componentWillUpdate()/UNSAFE_componentWillUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

When getDerivedStateFromProps or getSnapshotBeforeUpdate is present, the unsafe methods are not called.

shouldComponentUpdate returns true or false to control re‑rendering; PureComponent implements a shallow comparison of props and state.

Unmounting

componentWillUnmount()

Use this phase to clean up timers, event listeners, and network requests. setState must not be called here.

Error Handling

componentDidCatch(err, info)

This method catches errors during rendering, in lifecycle methods, and in constructors of child components, but not in event handlers, async code, server‑side rendering, or errors thrown by the error boundary itself.

Code Examples

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isScrollingDown: false, lastRow: null };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.currentRow !== prevState.lastRow) {
      return { isScrollingDown: nextProps.currentRow > prevState.lastRow };
    }
    return null;
  }

  componentDidMount() {
    // async requests, event bindings, etc.
  }

  render() {
    return <div>{/* component UI */}</div>;
  }
}

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>
        {/* list items */}
      </div>
    );
  }
}

Conclusion

React’s lifecycle can be visualized at react‑lifecycle‑methods‑diagram . While backward compatibility exists, it is recommended to avoid deprecated methods and adopt the new lifecycle for future‑proof components. For older React versions, the react‑lifecycles‑compat polyfill provides the new methods.