Uso de componentDidUpdate() en React - Guía del desarrollador

Cada componente en React tiene un ciclo de vida que puede ser monitorizado y manipulado. Estos ciclos de vida se pueden dividir en tres fases principales y son la fase de Montaje, Actualización y Desmontaje.

El montaje o nacimiento de un componente React inicia el ciclo de vida del componente. Es la fase en la que configuramos el estado de la aplicación y mostramos la UI. Es durante esta fase cuando se definen nuestros props. Los métodos utilizados durante la fase de montaje incluyen constructor(), render(), componentDidMount() y getDerivedStateFromProps()

Tras el nacimiento del componente en la etapa de montaje, la aplicación está lista para la etapa de actualización. En esta etapa, se reciben las actualizaciones de datos y se actúa sobre las acciones del usuario. Los métodos de actualización incluyen shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() y componentDidUpdate(). Se dice que un componente se actualiza cuando se produce un cambio en el estado o en los props.

El Desmontaje también conocido como la muerte de un componente React, es la fase en la que nuestro componente es eliminado del DOM. El método utilizado en esta fase es el método componentwillUnmount()

En este artículo, vamos a echar un vistazo en profundidad a componentDidUpdate() que es uno de los métodos de la fase de Actualización.

Qué es el método componentDidUpdate()

El método componentDidUpdate( ) es un método de actualización que se invoca después del método componentDidMount() y esto ocurre inmediatamente después de que ocurre una actualización y no para el render inicial.

Cabe señalar que no es exactamente 100% cierto y correcto decir que componentDidUpdate() se llama después de componentDidMount().

El componentDidMount () es llamado en la fase de Montaje, mientras que componentDidUpdate() es llamado en la fase de Actualización. Lo que significa que algunos métodos como getSnapshotBeforeUpdate() pueden ser llamados entre componentDidMount() y componentDidUpdate().La actualización puede ser siempre que se produzca una mutación de estado o siempre que haya cambios en los props.

Cada vez que se produce una mutación o cambio, el método componentDidUpdate( ) obtiene el estado anterior y los props anteriores como argumentos. Al obtener el estado anterior y los props anteriores como argumentos, este método nos permite comprobar si se ha cumplido una condición y, a continuación, llevar a cabo una acción específica si la comprobación devuelve verdadero.

La sintaxis de este método es:

componentDidUpdate(prevProps, prevState) {
 if (this.props.data !== prevProps.data) {
   console.log(this.props.data);
 }
}

La mayoría de las veces y en muy raras ocasiones, el método componentDidUpdate( ) será llamado después del método getSnapshotBeforeUpdate() y cuando esto sucede, un tercer argumento -snapshot- es pasado al método componentDidUpdate():

componentDidUpdate(prevProps, prevState, snapshot) {
 if (this.props.data !== prevProps.data) {
   console.log(this.props.data);
 }
}

Cómo "no" utilizar el método componentDidUpdate()

No debe establecer un estado no comprobado dentro del método componentDidUpdate(). A continuación se muestra un ejemplo de estado no comprobado:

componentDidUpdate(prevProps, prevState) {
  let value = this.props.data;
  this.setState({ isUpdated: false });// VERY BAD: DO NOT DO THIS!!!
}

La razón de esto es que si utilizamos el código anterior, entraríamos en un bucle infinito de renderizado porque primero renderizamos y luego llamamos a update que a su vez establece el estado desencadenando así otro renderizado y así sucesivamente.

La solución para esto es envolver su estado en declaraciones condicionales y luego sólo cambiar el estado en áreas específicas como veremos en el ejemplo a continuación:

componentDidUpdate(prevProps, prevState) {
  let value = this.props.data;
  if (this.state.value === value){
  this.setState({ value: '' });// A possible fix!!!
  }
}

Ejemplos de componentDidUpdate()

En el siguiente ejemplo, tenemos un manejador de clic que se activa cada vez que se hace clic en un botón de la aplicación que luego cambia el estado del clic al opuesto del estado actual.

import React from 'react';
class Counter extends React.Component {
  state = {
    clicked: false,
  };

  buttonPress = () => {
    this.setState({
      clicked: !this.state.clicked,
    });
  };
  componentDidUpdate(prevProps, prevState) {
    prevState.clicked === this.state.clicked
      ? console.log('same state')
      : console.log('changed clicked state');
  }
  render() {
    return (
      <React.Fragment>
        <button
          style={{
            margin: 'auto',
            width: '50%',
            padding: 20,
            marginTop: '10%',
            border: 'solid 1px black',
            textAlign: 'center',
            fontSize: 18,
            color: 'black',
            cursor: 'pointer',
          }}
          onClick={this.buttonPress}
        >
          Click me
        </button>
      </React.Fragment>
    );
  }
}
export default Counter;

En el ejemplo anterior, vemos que el método componentDidUpdate( ) obtiene el estado anterior como parámetro y luego comprueba que el estado anterior sea el mismo que el estado actual de clic y luego registra el mensaje apropiado en la consola. si el estado no se hubiera actualizado, ese mensaje sería diferente.

Casos de uso del método componentDidUpdate()

Trabajar con el DOM

Una de las formas en que podemos hacer uso del método componentDidUpdate () es cuando trabajamos con el DOM. Dado que el método componentDidUpdate () es llamado después de la fase de Montaje, significa que también podemos acceder a los nodos del DOM en él. Podemos hacer uso del método para operar sobre el DOM cuando el componente ha sido actualizado como podemos ver en el siguiente ejemplo:

import React from 'react';
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 39 };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({ counter: 39 + 4 });
    }, 2000);
  }
  componentDidUpdate(prevState, prevProps) {
    if (prevState !== this.state) {
      document.getElementById('mydiv').innerHTML =
        'The updated counter is ' + this.state.counter;
    }
  }
  render() {
    return (
      <div>
        <h1>My counter says: {this.state.counter}</h1>
        <div id="mydiv"></div>
      </div>
    );
  }
}
export default Counter;

En el ejemplo anterior podemos ver la fase de Montaje y Actualización del ciclo de vida de nuestro componente. Creamos el estado de nuestra aplicación, luego llamamos al método componentDidMount (), actualizamos nuestro estado y luego establecemos un tiempo de espera para que podamos seguir el ciclo de vida de nuestro componente. El método componentDidUpdate( ) fue llamado después del método componentDidMount(). En él, obtenemos nuestro estado anterior y props anteriores como argumentos. Luego comprobamos si el estado anterior no es igual al estado actual. Como la condición devolvía true, accedíamos al DOM y establecíamos el HTML interno del div con un mensaje de nuestra elección.

Obtención de datos del servidor / Llamadas a la API

Otro caso de uso para el método componentDidUpdate( ) es hacer llamadas al servidor o consultar un punto final de la API. La razón por la que este método es útil para esto es porque obtiene más datos sin actualizar la página, después de la obtención inicial en la carga de la página.

import React from 'react';
class Counter extends React.Component {
  // The first state lives here 
}

class ProjectsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { projects: [] };
  }
  // Emulates fetching data from server, data is returned after 300 ms timeout
  fetch = (person) => {
    setTimeout(() => {
      this.setState({
        projects:
          person === 'Isaac'
            ? ['Create a dashboard with React', 'Play Monopoly with friends']
            : [
                'Work on a project with Isaac',
                'Win a game of chess against a grandmaster',
              ],
      });
    }, 300);
  };
  componentDidUpdate(prevProps, prevState) {
    // check whether person has changed
    if (prevProps.person !== this.props.person) {
    // fetch if the person has changed
      this.fetch(this.props.person);
    }
  }
  render() {
    // render a list of projects
    return (
      
    );
  }
}
export default Counter;

A continuación se muestra un enlace a un codesandbox que tiene el código completo :

tps://codesandbox.io/s/blissful-breeze-w12rps

En el ejemplo anterior, creamos una función fetch que emula el uso de fetch o axios. En el método componenDidUpdate( ), comprobamos si el nombre de la persona ha cambiado comparando las props anteriores con las props actuales. Si hay un cambio en el nombre de la persona, solicitamos una lista de proyectos y luego actualizamos el estado del componente con los proyectos

Hay que tener en cuenta que no actualizamos el estado interno del componente para evitar un bucle infinito de actualización y por eso comprobamos el nombre de la persona en props para evitarlo.

Conclusión

En este artículo, hemos echado un buen vistazo al método componentDidUpdate, sus peculiaridades, ejemplos y casos de uso. También hemos visto las malas prácticas al trabajar con el método componentDidUpdate y las soluciones a las mismas. Espero que este artículo proporcione respuestas a las preguntas que pueda tener sobre el método componentDidUpdate ( ), a la vez que proporciona una mejor comprensión de su funcionamiento.