ReactJS componenteDidUpdate() Método

El método componentDidUpdate() nos permite ejecutar el código React cuando se actualiza el componente. Aquí se codifican todas las requests de red que se deben realizar cuando se pasan los accesorios al componente.

El componenteDidUpdate() se llama después del componenteDidMount() y puede ser útil para realizar alguna acción cuando cambia el estado del componente.

Sintaxis:

componentDidUpdate(prevProps, prevState, snapshot)

Parámetros: Los siguientes son los parámetros utilizados en esta función:

• prevProps: accesorios anteriores pasados ​​​​al componente
• prevState: estado anterior del componente
• instantánea: valor devuelto por el método getSnapshotBeforeUpdate()

Sugerencia: para evitar un bucle infinito, todas las requests de red deben estar dentro de una declaración condicional como:

componentDidUpdate(prevProps, prevState) {
  if (prevState.data !== this.state.data) {
    // Now fetch the new data here.
  }
}

Creando la aplicación React:

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

npx create-react-app functiondemo

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

cd functiondemo

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: en este ejemplo, vamos a crear una aplicación React que cambia el texto del encabezado cuando se actualiza el estado del componente.

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react';
  
class App extends React.Component {
  // Defining the state
  state = {
    company: 'GFG'
  };
  
  componentDidMount() {
    // Changing the state after 600ms
    setTimeout(() => {
      this.setState({ company: 'GeeksForGeeks' });
    }, 600);
  }
  
  componentDidUpdate() {
    document.getElementById('disclaimer').innerHTML =
      'P.s:  GFG is also known as ' + this.state.company;
  }
  
  render() {
    return (
      <div>
        <h1 style={{
          margin: 'auto',
          width: '50%',
          padding: 20,
          marginTop: '10%',
          border: 'solid 1px black',
          textAlign: 'center',
          fontSize: 18,
        }}>
          Greatest Science Portal For Geeks :
          {this.state.company}
          <div id="disclaimer"></div>
        </h1>
      </div>
    );
  }
}
  
export default App;

Nota: Puede aplicar su propio estilo a la aplicación.

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: 

Producción