This lifecycle is invoked after an error has been thrown by a descendant component. It receives the error that was thrown as a parameter and should return a value to update state.

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

  static getDerivedStateFromError(error) {    // Update state so the next render will show the fallback UI.    return { hasError: true };  }
  render() {
    if (this.state.hasError) {      // You can render any custom fallback UI      return <h1>Something went wrong.</h1>;    }
    return this.props.children;
  }
}
Error boundaries only catch errors in the components below them in the tree. An error boundary can’t catch an error within itself.

static getDerivedStateFromError(error)
componentDidCatch() is called during the “commit” phase, so side-effects are permitted. It should be used for things like logging errors:

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {    // Example "componentStack":    //   in ComponentThatThrows (created by App)    //   in ErrorBoundary (created by App)    //   in div (created by App)    //   in App    logComponentStackToMyService(info.componentStack);  }
  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

Recommend

React.Component Reference static getDerivedStateFromError()

React.Component Reference getSnapshotBeforeUpdate()

React.Component Reference static getDerivedStateFromProps()

React.Component Reference shouldComponentUpdate()

React.Component Reference componentWillUnmount()

React.Component Reference componentDidUpdate()

React.Component Reference componentDidMount()

React.Component Reference constructor()

React.Component Reference render()

React.Component Overview

Render Props Caveats Be careful when using Render Props with React.PureComponent

React Render Props Using Props Other Than render

React Render Props Use Render Props for Cross-Cutting Concerns

React Render Props

React Hooks FAQ Performance Optimizations How to read an often-changing value from useCallback?

React Hooks FAQ Performance Optimizations How to avoid passing callbacks down?

React Hooks FAQ Performance Optimizations Are Hooks slow because of creating functions in render?

React Hooks FAQ Performance Optimizations How to create expensive objects lazily?

React Hooks FAQ Performance Optimizations How to memoize calculations?

React Hooks FAQ Performance Optimizations How do I implement shouldComponentUpdate?

React Hooks FAQ Performance Optimizations What can I do if my effect dependencies change too often?

React Hooks FAQ Performance Optimizations Is it safe to omit functions from the list of dependencies?

React Hooks FAQ From Classes to Hooks How can I measure a DOM node?

React Hooks FAQ From Classes to Hooks Is there something like forceUpdate?

React Hooks FAQ From Classes to Hooks How do I implement getDerivedStateFromProps?

React Hooks FAQ From Classes to Hooks Why am I seeing stale props or state inside my function?

React Hooks FAQ From Classes to Hooks How to get the previous props or state?

React Hooks FAQ From Classes to Hooks Should I use one or many state variables?

React Hooks FAQ From Classes to Hooks Is there something like instance variables?

React Hooks FAQ Adoption Strategy How to test components that use Hooks?

React Forms Controlled Input Null Value

React Forms Handling Multiple Inputs

React Forms The file input Tag

React Forms The select Tag

React Forms The textarea Tag

React Forms Controlled Components

React Forms

Thinking in React Start With A Mock

React Typechecking With PropTypes Function Components

React Typechecking With PropTypes Default Prop Values

React Typechecking With PropTypes Requiring Single Child

React Typechecking With PropTypes PropTypes

React Typechecking With PropTypes

React Lifting State Up Lifting State Up

React Lifting State Up Writing Conversion Functions

React Lifting State Up Adding a Second Input

React Lifting State Up

ReactDOM Reference createPortal()

ReactDOM Reference findDOMNode()

ReactDOM Reference unmountComponentAtNode()