React.js estático getDerivedStateFromProps()

El método getDerivedStateFromProps() se usa cuando el estado de un componente depende de los cambios de accesorios.

getDerivedStateFromProps(props, state) es un método estático que se llama justo antes del método render() tanto en la fase de montaje como en la de actualización en React. Toma accesorios actualizados y el estado actual como argumentos.

Tenemos que devolver un objeto al estado de actualización o nulo para indicar que nada ha cambiado.

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, acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

import React from 'react';
import ReactDOM from 'react-dom';
  
class App extends React.Component {
  
  render() {
  
    return (
      <div>
      <Child name = "sachin"></Child>
      </div>
    )
  }
}
  
class Child extends React.Component{
    constructor(props){
        super(props);
        this.state = {
        name: "kapil"
        };
    }
    static getDerivedStateFromProps(props, state) {
        if(props.name !== state.name){
            //Change in props
            return{
                name: props.name
            };
        }
        return null; // No change to state
    }
    /* if props changes then after getDerivedStateFromProps
       method, state will look something like 
  
    {
        name: props.name
    }
    */
    render(){
       return (
        <div> My name is {this.state.name }</div>
       )
    }
}
                      
export default App;

Si los accesorios cambian, el estado también cambiará en consecuencia; de lo contrario, getDerivedStateFromProps devolverá un valor nulo que indica que no hay cambios en el estado. En el ejemplo anterior, los accesorios tienen una propiedad llamada nombre, pero el estado tiene esa propiedad con un valor diferente. por lo que el estado cambiará de acuerdo con el valor de la propiedad props.

Producción:

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