Q419: What is the purpose of getDerivedStateFromError? - React & Modern Frontend (445 Qs)

This lifecycle method 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.

csharp

The signature of the lifecycle method is as follows,

javascript

    static getDerivedStateFromError(error)

vbnet

Let us take error boundary use case with the above lifecycle method for demonstration purpose,

javascript

    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;
      }
    }