Método ReactJS getDerivedStateFromError()

El método getDerivedStateFromError() se invoca si se produce algún error durante la fase de representación de cualquier método de ciclo de vida o cualquier componente secundario. Este método se usa para implementar los límites de error para la aplicación React. Se llama durante la fase de renderizado, por lo que no se permiten efectos secundarios en este método. Para los efectos secundarios, utilice en su lugar componentDidCatch(). 

Sintaxis:

static getDerivedStateFromError(error)

Parámetros: Acepta como parámetro el error que fue arrojado.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando:

cd foldername

Ejemplo : Programa para demostrar el uso del método getDerivedStateFromError().

Estructura del proyecto: Tendrá el siguiente aspecto. 
 

Nombre de archivo: App.js

import React, { Component } from 'react';
 
export default class App extends Component {
 
  // Initializing the state
  state = {
    error: false
  };
 
  static getDerivedStateFromError(error) {
    // Changing the state to true if some error occurs
    return {
      error: true,
    };
  }
 
  render() {
    return (
      <React.StrictMode>
        <div>
          {this.state.error ? <div>Some error</div> : <GFGComponent />}
        </div>
      </React.StrictMode>
    );
  }
}
 
class GFGComponent extends Component {
 
  // GFGComponent throws error as state of GFGCompnonent is not defined
  render() {
    return <h1>{this.state.heading}</h1>;
  }
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

Referencia: https://reactjs.org/docs/react-component.html#static-getderivedstatefromerror