Comprender cómo funcionan los métodos del ciclo de vida en componentes creados con clases es fundamental para evitar bucles infinitos y controlar correctamente el flujo de renderizado en React. Aquí se explica paso a paso cómo replicar el comportamiento de los efectos usando estos métodos, cuándo se ejecutan y por qué los condicionales son indispensables.
¿Cómo se crea un estado de carga en un componente de clase?
En los componentes creados con clases, no es posible declarar múltiples llamadas a useState. En su lugar, todas las propiedades del estado viven dentro de un único objeto this.state. Para agregar un estado de carga, se añade la propiedad loading con valor false por defecto dentro del constructor [01:00].
Cuando el usuario hace clic en el botón de comprobar, se llama a this.setState({ loading: true }), lo que actualiza el estado y muestra un mensaje de "Cargando" condicionado a this.state.loading === true [02:06].
¿Qué son los métodos del ciclo de vida y cuándo se ejecutan?
Los métodos del ciclo de vida son funciones que React invoca automáticamente en momentos específicos del renderizado de un componente de clase. Los principales son:
- componentWillMount: se ejecuta antes de renderizar el componente por primera vez. Su nombre en inglés indica futuro: will mount, se va a montar [04:10].
- componentDidMount: se ejecuta después de que el componente ya fue renderizado. Did indica pasado en inglés: ya se montó [04:30].
- componentWillUnmount: se ejecuta justo antes de que el componente sea desmontado, es decir, cuando desaparece del DOM [04:45].
El orden de ejecución no depende de dónde se escriban en el código, sino del momento del ciclo que representan. React siempre los ejecuta en su orden lógico.
¿Por qué componentWillMount ya no es recomendable?
Al usar componentWillMount, React muestra un warning indicando que este método fue renombrado y ya no se recomienda [06:12]. Siguiendo los principios de diseño de React, en lugar de eliminar funcionalidades de golpe, el equipo de React primero las renombra, muestra alertas y sugiere alternativas. En este caso, el método pasa a llamarse UNSAFE_componentWillMount, dejando claro que su uso es inseguro y que la alternativa preferida son los efectos con hooks [07:00].
¿Cómo se detecta el desmontaje de un componente?
Para observar componentWillUnmount en acción, se crea un componente separado llamado Loading que solo renderiza un párrafo con el texto "Cargando". Cuando el estado loading pasa de true a false, el componente Loading se desmonta y se ejecuta su método componentWillUnmount, imprimiendo un mensaje en consola [09:15].
¿Cómo evitar bucles infinitos con componentDidUpdate?
El método componentDidUpdate se ejecuta cada vez que hay un cambio en el estado, pero no en el renderizado inicial [11:00]. Esto lo diferencia de componentDidMount, que solo corre una vez al montar.
El peligro aparece al llamar this.setState dentro de componentDidUpdate sin protección. Si se ejecuta this.setState({ loading: false }) directamente, ocurre lo siguiente:
setState provoca una nueva actualización.- La nueva actualización vuelve a ejecutar
componentDidUpdate.
componentDidUpdate vuelve a llamar a setState.- Se genera un bucle infinito [13:20].
La solución es un condicional que valide el estado antes de actuar:
javascript
componentDidUpdate() {
if (this.state.loading) {
setTimeout(() => {
this.setState({ loading: false });
}, 3000);
}
}
Cuando loading es true, se programa un setTimeout que después de tres segundos lo cambia a false. Eso dispara otra ejecución de componentDidUpdate, pero como loading ya es false, el condicional no pasa y el ciclo se detiene [14:50].
Esta lógica es equivalente a la protección que se usa en los efectos con hooks, donde el segundo argumento del array de dependencias controla cuándo se vuelve a ejecutar.
Los métodos del ciclo de vida resultan más descriptivos que los efectos, donde todo depende de un array como segundo argumento. Sin embargo, ambos requieren entender bien qué significa montar, actualizar y desmontar para evitar comportamientos inesperados. Si te interesa profundizar en optimización de render en React, comparte tu interés en los comentarios.
