¿Conoces el estado y ciclo de vida de componentes en React? React es una librería de JavaScript que nos permite crear interfaces de usuario en el proceso de desarrollar aplicaciones de una sola página. Su gran utilidad y versatilidad la ha convertido en la segunda librería más popular en el mundo de la programación web. Dentro de la sintaxis de esta poderosa librería están los elementos, los componentes y los estados. En este post, te enseñaremos cómo funciona el estado y ciclo de vida de componentes en React, un conocimiento fundamental para entender la lógica detrás de su render.
Un poco de contexto
Si has leído nuestro post sobre los efectos en React, sabes que con el uso del comando useEffect puedes crear pedazos de código que no necesariamente tienen que ver con lo que renderizamos. Ya que un efecto en React sucede después del primer render, podemos crear elementos o funciones que se salgan de las reglas de este proceso. Esto tiene que ver con el estado y ciclo de vida de componentes en React.
Cuando hablamos de estado y ciclo de vida de componentes en React, nos referimos a aquellas funciones que se relacionan con el proceso de renderizar un componente. Mientras que un efecto nos permite salirnos del constante proceso de render de un componente, un estado provoca dicho render para actualizar el dato a modificar. En React, esto se logra a partir del comando this.setState. Para conocer más sobre este tema, te recomendamos leer nuestro post sobre el estado en React.
¿Qué es el estado y ciclo de vida de componentes en React?
El estado y ciclo de vida de componentes en React es una lógica que se manejaba mucho más cuando esta librería se basaba en clases. En ese momento, existían una serie de funciones que todo componente podía tener y que definían la etapa en la que se ejecutaba una acción. Este ciclo se basa en tres etapas: mounting, updating y unmounting.
Antes de hablar de las funciones, definamos los pasos esenciales en este ciclo de vida. Ya que un componente puede funcionar como una clase, este elemento puede tener un constructor, el cual nos introduce a la etapa de mounting. Además, todo componente tipo clase debe tener un render. Este render sucede entre la etapa de mounting y updating, crucial para crear el elemento JSX a renderizar.
Más allá de los pasos de un componente, también podíamos definir las funciones anteriormente mencionadas. El ciclo de vida de nuestro componente pasaría por estas funciones. A continuación, te explicamos cómo se utilizaban las funciones para definir el estado y ciclo de vida de componentes en React.
componentDidMount
La función componentDidMount se lanzaba después de que el componente se montara en el DOM y se renderizara por primera vez. Dentro de esta función podíamos meter cualquier sección de código que quisiéramos ejecutar justo en ese momento del ciclo de vida. Este código puede no tener que ver exactamente con aquello que estamos renderizando, pero puede ser necesario para introducir datos a nuestro proyecto. Un ejemplo de esto sería una llamada a una API.
componentDidUpdate
La función componentDidUpdate se ejecuta en la fase de updating, en la cual se actualiza un componente, ya sea porque su estado interno se modifica o porque le otorgamos nuevos props. Esta modificación provoca un nuevo render, tras el cual se ejecuta la función componentDidUpdate. Al igual que con la anterior función, aquí podemos introducir cualquier trozo de código que queramos.
componentWillUnmount
La función componentWillUnmount se ejecuta en la fase de desmontado o unmounting. Esta fase nos permite hacer que el componente desaparezca del DOM. Una vez esto sucede, se ejecuta la función componentWillUnmount.
Aunque estas fases suceden mucho más claramente en los componentes de tipo clase, ten en cuenta que existen equivalencias en los componentes de tipo función. Para conocer más sobre este tema, te invitamos a leer nuestro post sobre componentes en React.
¿Quieres seguir aprendiendo?
Después de leer este post, sabes qué es y cómo funciona el estado y ciclo de vida de componentes en React, lo cual te ayudará a entender muchas de las situaciones de esta librería de JavaScript. Si quieres seguir aprendiendo acerca del mundo de la programación para la web, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva en el que aprenderás a dominar herramientas como React, JavaScript, HTML y CSS. ¿Te animas a seguir aprendiendo con nosotros? ¡No lo dudes más e inscríbete!
