Ciclo de vida de los componentes

Introducción

Al igual que las cosas en el mundo real, los componentes pasan por ciertas etapas: creación, crecimiento o modificación y destrucción. Veamos que pasa cada vez que un componente se renderiza.

Todos los componentes al renderizarse pasan por 4 grandes fases:

1. Montado

2. Actualización

3. Desmontado

En cada una de estas fases se ejecutan diferentes métodos que veremos a continuación.

Ciclo de vida de los componentes de React v16.4

Mounting

Es lo primero que ocurre. El primer método que se llama en esta fase es el constructor. En este método es donde iniciamos nuestro componente, por ejemplo: su state, sus props default, se bindean métodos, etc.

Un error común es agregar lógica dentro de este método, se recomienda no hacerlo, para ello hay otros métodos que veremos a continuación.

Lo que le sigue es el método render que ya hemos utilizado anteriormente. Este método monta el componente en el DOM.

Luego de que el componente es montado en el DOM se ejecuta componentDidMount, este método es muy utilizado. Una particularidad es que se ejecuta una sola vez en todo el ciclo de un componente, es por eso que se utiliza por ejemplo para hacer llamados AJAX.

En resumen la fase de montado es el siguiente:

1. constructor

2. getDerivedStateFromProps

3. render

4. componentDidMount

Updating

Una vez que el componente esta montado entra en la fase de actualización. Estos métodos se ejecutan cuando el componente sufre algún tipo de modificación.

El siguiente método que se ejecuta es el shouldComponentUpdate(nextProps, nextState, nextContext). Por defecto el componente se actualizará cada vez que reciba nuevas props, cambie el state o el context. Si nosotros creemos que es innecesario actualizar el componente podemos hacer que este método retorne false, eso evita que se ejecute el método render.

Luego, al igual que en la fase de montaje tenemos se ejecuta el método render.

Si el método render se ejecuta correctamente se llamará al método componentDidUpdate(prevProps, prevState). Aquí se suelen ejecutar llamadas AJAX o algún tipo de lógica post update.

Desde react 16 tenemos un método nuevo llamado componentDidCatch(errorString, errorInfo). Este método funciona de forma muy similar al clásico try/catch, en caso de que ocurra un error al actualizar el componente se ejecutará. Podemos utilizarlo por ejemplo en un componente padre que sepa hacer el manejo de errores de nuestra aplicación. Recibe dos parámetros:

• errorString: contiene el mensaje del error

• errorInfo: es un objeto que contiene el componentStack para detectar donde ocurrió el error

Aclaración sobre componentDidCatch

Escuchara solamente los errores de sus componentes hijos.

En resumen la fase de actualización es el siguiente:

1. getDerivedStateFromProps

2. shouldComponentUpdate

3. render

4. componentDidUpdate

5. componentDidCatch (solo si ocurre un error en un hijo)

Unmounting

Por último tenemos la fase de desmontado. Se ejecuta cada vez que un componente será quitado del DOM.

Esta fase se compone de un solo método y es el componentWillUnmount.

Es común utilizar este método por ejemplo para eliminar los temporizadores o quitar eventos sobre el DOM, como escuchar un scroll o resize.

Un Ejemplo

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  
  componentDidMount() {
    var intervalId = setInterval(
      () => this.setState({ date: new Date() }),
      1000
    );
    this.setState({ intervalId });
  }
  
  componentWillUnmount() {
    clearInterval(this.state.intervalId);
  }
  
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
​
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Practico

Para este ejercicio, partan del archivo 'step4_App.js' que se encuentra dentro de la carpeta base_steps. Copien el contenido a App.js y corran el proyecto.

En este ejercicio vamos a volver a practicar el manejo de state, eventos, conditional rendering, y ciclos de vida

1. Primero deben completar el componente UserLogin que con el botón de Login, cambie el boolean 'loggedIn' en el state.

2. También deben completar el segundo input, agregando el evento onChange para actualizar el dato de la edad ingresado.

3. Utilizando Conditional Rendering, solo dibujar el componente MainApp si el valor de 'loggedIn' es true.

4. Luego necesitamos que los datos de 'name' y 'age' guardados en UserLogin lleguen hasta el componente BeerComponent y que este muestre el nombre del usuario logueado. (Van a tener hacer un 'pasa manos' de props).

5. Utilizar un método de ciclo de vida en BeerComponent de forma de enterarse cada vez que cambie la edad del usuario logueado, y esto actualice el state de BeerComponent, para que muestre el mensaje correcto sobre si puede o no tomar cerveza.