En el post ReactJS: Conceptos Básicos, desarrollamos el concepto del virtualDOM y la actualización de la vista generada producto de la modificación de un valor del Objeto State de un Componente. Dicha actualización se produce en un proceso de cuatro fases conocido como Ciclo de Vida. React nos permite realizar acciones adicionales durante la ejecución de cualquiera de esas cuatro fases.
Ahora bien, al momento de crear las UI es muy probable que necesitemos realizar acciones en algún punto de este Ciclo de Vida, para eso React nos ofrece los Métodos del Ciclo de Vida. Estos métodos son funciones que podemos utilizar para agregar lógica personalizada al Ciclo de Vida.
El Ciclo de Vida está atado al cambio de un valor en el Objeto State por lo que, los únicos Componentes que pueden manipular estos métodos son los Componentes de Clase. Por su puesto, al igual que lo que sucede con el Hook useState, a partir de la versión 16.8 existe el Hook useEffect que nos permite la manipulación de estos métodos en un Componente Funcional.
En la Fase de Inicialización nos encontramos con los métodos constructor y render.
El método constructor es usado por las clases para indicar cuáles son los valores iniciales de una instancia de esa clase; mientras que el método render es usado en React para indicar qué vista se debe mostrar cuando el componente se monte en el DOM real.
Todo Componente ejecutará su método constructor la primera vez que se genere la vista. Una vez finalizado, con los valores de State correctamente almacenados en el virtualDOM se ejecuta el método render.
En la Fase de Montaje tenemos el método componentDidMount y render.
El método componentDidMount se ejecuta inmediatamente después de la ejecución del método render correspondiente a la Fase de Inicialización. En este punto, el Componente ya se encuentra en DOM real, por lo que es posible utilizar las API Web del navegador. Por ejemplo, si queremos hacer una petición AJAX, debemos emplear este método porque el virtualDOM no tiene la capacidad de realizar peticiones AJAX.
Algo a tener en cuenta del método componentDidMount es que si se cambia algún valor de State producto de su ejecución, de forma automática desata la Fase de Actualización del Ciclo de Vida, lo que, en consecuencia, genera un nuevo renderizado del Componente. Al usar este método hay que tener cuidado de no incurrir en un loop infinito de renderizado de Componente.
En la Fase de Actualización encontramos el método componentDidUpdate y render.
Este método no suele trabajarse mucho porque implica generar una acción inmediatamente después de que se haya ejecutado un cambio que desata el Ciclo de Vida. El ejemplo más expandido de uso para este método es la concatenación de peticiones AJAX.
Por último, en la Fase de Desmontaje contamos con el método componentWillUnmount.
El final del Ciclo de Vida implica la destrucción del Componente. Ahora bien, existen ciertos elementos que quedan almacenados en la memoria de navegador sin importar que el Componente ya no exista. Para no saturar la memoria es importante también eliminar esos elementos. Acá es donde es útil el método componentWillUnmount porque se ejecuta inmediatamente antes de la destrucción del Componente.
Una vez que entendimos qué son y cómo funcionan los métodos del Ciclo de Vida, vamos a analizar el uso del Hook useEffect para aprovechar sus características en los Componentes Funcionales.
Recordemos que los Hooks son funciones agregadas a partir de la versión 16.8 de React para permitir que las funcionalidades dependientes del Objeto State (mismo que solo puede existir en los Componentes de Clase) puedan ser aplicadas a los Componentes Funcionales.
En otros posts analizamos el Hook useState que es el encargado de la emulación del trabajo de los valores de State en un Componente. Es decir, gracias al Hook useState, el virtualDOM puede utilizar valores almacenados en los Componentes Funcionales para desatar el Ciclo de Vida.
Como ya sabemos, el Ciclo de Vida de un Componente implica el montaje inicial con el correspondiente almacenamiento de valores y la actualización de ese montaje cuando alguno de esos valores almacenados es modificado durante la interacción con el usuario. También vimos que es posible aplicar los Métodos del Ciclo de Vida para realizar acciones en algún punto del proceso de actualización. El Hook useEffect, entonces, es el encargado de emular el trabajo de los Métodos del Ciclo de Vida en un Componente Funcional.
Cuando estamos manipulando el Ciclo de Vida de los Componentes es importante tener muy en claro el Árbol de Componentes.
Trabajar con el Renderizado Condicional implica que el virtualDOM analiza los valores del State para saber qué renderizar. Es decir, si X valor es true, entonces mostramos X vista. Si a esta idea le agregamos Eventos, entonces podemos armar, de forma muy sencilla, una vista dinámica para mostrar u ocultar elementos según la interacción del usuario con nuestra App.
Ahora bien, ¿por qué es relevante este concepto?. Sencillo, el Renderizado Condicional depende del Ciclo de Vida del Componente y todos los Componentes que se encuentren dentro del Componente que está siendo afectado por el Renderizado Condicional van a ver desatado su Ciclo de Vida también.
Vamos a imaginar que un Componente, llamémosle Componente A, es una caja. Dentro de esa caja ponemos otros Componentes (otras cajas). Los Componentes B y C.
Si movemos el Componente A (la caja que contiene a los Componentes B y C), vamos a mover los Componentes que contiene (B Y C).
Si rompemos el Componente A, vamos a romper los Componentes B y C.
Si desatamos el Ciclo de Vida del Componente A, se desatan los Ciclos de Vida de los Componentes B y C.
Una vez entendido esto, pensemos lo siguiente. Creamos un Componente A para que sea renderizado de forma condicional cuando el usuario haga clic en un botón. Dentro de ese Componente, creamos en Componente B en el que usados el Hook useEffect con el array de dependencias vacío para realizar una acción cuando el Componente B se monte. El Componente B se va a montar y desmontar cada vez que el Componente A se monte o desmonte producto de la interacción del usuario con la App, por lo tanto, la lógica planteada dentro del useEffect se ejecutará cada vez que el usuario muestre u oculte al Componente A.
En este ejemplo, de forma muy básica, pudimos ver cómo se desata el efecto del Componente B aunque la intención era montar el Componente A. Es por ese motivo que cuando manipulamos el Ciclo de Vida de un Componente debemos prestar especial atención al Árbol de Componentes para evitar ejecuciones no deseadas.
Cuando nuestra aplicación se cargue por primera vez, el virtualDOM almacena los datos guardados en todos los valores de State de los distintos Componentes e inserta los nodos creados a partir del código JSX en el DOM real.
Cuando el usuario realiza una acción que modifica alguno de esos valores iniciales, el virtualDOM elimina ese Componente (y todos los Componentes que contiene) del DOM real. Actualiza los valores correspondientes y vuelve a insertarlo con la vista actualizada.
Todo el intercambio entre el virtualDOM y el DOM real sucede sin necesidad de que el desarrollador intervenga, pero, de ser necesario, es posible efectuar alguna acción durante la misma utilizando los Métodos del Ciclo de Vida (Hook useEffect).
El Renderizado Condicional de un Componente que contenga Componentes que ejecuten acciones durante el Ciclo de Vida, desata dichas acciones.
Redes