Ciclo de vida de los Componentes en React

¿Estás tenido problemas para entender el ciclo de vida de React? No te preocupes, en este post te lo voy a resumir para que lo aprendas fácilmente.

Primero, avisarte de que en la última versión de React han comentado que van a dejar soporte a determinados métodos que se estan quedando antiguos, pero no te preocupes porque esos no los vamos a ver, y con esto comentado, empezemos

¿Qué son los métodos de ciclos de vida?

Son la serie de eventos que sucede desde que se crea el componente hasta su destrucción
Para que te sea mas fácil de comprender el ciclo de vida de un componente es como la serie de sucesos que le ocurre a un ser vivo, desde su nacimiento hasta su fallecimiento.

Los palabras claves de los métodos son las siguientes

1º Mounting: El nacimiento del componente o del ser vivo

2º Update: Crecimiento / cambios en el componente

3º Unmount: Muerte del componente

Ahora que ya sabemos la serie de sucesos de un componente, pasemos a hablar de como funcionan

Ciclos más usados

Render()

El método render() es el método más usado con diferencia, y si has visto algo de React ya te sonará de algo y eso es porque es el unico metodo obligatorio en la clase de un componente de React

1º componentDidMount()

En el momento que tu componente ya se haya montado, es cuando este metodo empieza a ejecutarse.

En este método se suele poner las llamadas a la api en el caso de que lo necesitaras.

Ejemplo:

cargarDatos = () => {
    var url = "http://yoururlapirequest.com"
    axios.get(url).then(res => {
        this.setState({
            departamentos: res.data
        });
    });
}
componentDidMount = () => {
    this.cargarDatos();
}

2º componentDidUpdate()

Este ciclo se invoca tan pronto como la actualizacion ocurre.

Se suele usar para actualizar el DOM con los datos de tu state.

Ejemplo de uso:

componentDidUpdate(previasProps, previoState) {
        if (this.props.input == previasProps.input) {
          // Llamar a una funcion o hacer peticiones ajax
        }
}

3º componentWillUnmount()

Como el nombre suguiere, este metodo se llamara justo antes de que sea destruido. Se suele utilizar para limpieza (cerrar peticiones ajax, timeouts, eliminar Eventos… )

Ejemplo de uso:

componentWillUnmount() {
      document.removeEventListener("click", funcionAsignada);      
}

Diagrama del transcurso de estos métodos

Si haces click en el título, te llevará a una página con un diagrama exactamente como en el de la imagen, con los métodos que hemos estado aprendiendo. Si haces en cualquiera de ellos te redirige a la documentación oficial del framework.

Y hasta aquí la explicación, espero que te haya servido. Si tienes alguna duda deja un comentario.

Autor: Sergio Arribas Sánchez

Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma

Centro: Tajamar

Año académico: 2020-2021

Código / recursos utilizados / Otros datos de interés:

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
https://github.com/Sergio-ASdev/POST.git