React js y el ciclo de vida de los componentes.

En esta ocasión vamos a tratar de despejar cualquier duda sobre cúales son los métodos disponibles en React js y cómo actuar en cada uno de los puntos de construcción, actualización y destrucción de un componente.

Construcción / Mounting

componentWillMount

Es un método muy sencillo de comprender. Sólo se ejecuta antes de que el componente sea montado en el DOM. Si utilizas ecmascript 6, debes usar el método constructor pasándole las props como parámetro y usar el método super para activar correctamente el componente.

componentDidMount

Este método solo se ejecuta justo después de que el componente haya sido montado en el DOM. Es el método perfecto para integrar librerias de terceros (plugins jquery), realizar alguna petición ajax ó establecer algún timer de tipo setTimeout ó setInterval.

Actualización / Updating

componentWillReceiveProps

Este método no se ejecutará una vez se monte el componente, si no que se esperará a recibir nuevas props de un componente padre para ejecutarse. Tiene como parámetro las futuras propiedades que va tener nuestro componente.

componentWillUpdate

Muy similar a componentWillReceiveProp solo que se ejecuta justo antes del render, cuando nuestros props o estados han sido recibidos. Es útil para preparar antes de hacer un render. Tampoco se va a ejecutar con el primer render.

Es importante no usar aquí setState() ya que la aplicación entraría en bucle.

shouldComponentUpdate

Se ejecuta de la misma forma que el anterior. Con este método podremos mejorar nuestra performance. Por defecto, siempre retorna true.

Si hacemos que retorne false, cancelariamos el render hasta un nuevo cambio de propiedades o de estado y ni componentWillUpdate, ni componentWillReceiveProps serían ejecutados.

componentDidUpdate

Es invocado inmediatamente después de que el componente se haya actualizado. Aquí es donde podemos manejar el componente ya renderizado y actualizado en el DOM.

Destrucción / Unmounting

componentWillUnmount

Este metodo se ejecuta justo antes de que el componente sea destruido o eliminado del DOM. Es perfecto para cualquier tipo de reset y no recibe ningún tipo de parámetro.

Orden de ejecución de los métodos

# Creación de un componente:

  • Se dispara el método componentWillMount
  • Se renderiza y se monta el componente en el DOM
  • Se dispara el método componentDidMount

# Actualización de un componente:

  • Se dispara el método shouldComponentUpdate
  • Se dispara el método componentWillReceiveProps si recibe nuevas props.
  • Se dispara el método componentWillUpdate antes de volver a renderizar.
  • Se actualiza el componente y se renderiza en el DOM
  • Se dispara el método componentDidUpdate una vez este el componente renderizado.

# Destrucción de un componente:

  • Se dispara el método componentWillUnmount antes de que se destruya el componente
  • El componente es destruido y eliminado del DOM

Más información:

Para más información acerca del ciclo de vida de los componentes en React js puedes visitar (en inglés) la guía oficial de react.