Efectos y ciclo de vida en componentes React con useEffect

Entender cómo React gestiona el estado y los efectos es esencial para crear aplicaciones interactivas y dinámicas. En este artículo, exploraremos el uso de estados y efectos en componentes funcionales de React, particularmente cómo utilizar useState y useEffect para gestionar operaciones asincrónicas, como la simulación de llamadas a una API.

¿Cómo trabajar con estados en React?

En React, los estados son utilizados para mantener la información que puede cambiar a lo largo del tiempo en los componentes. La introducción de los Hooks con la versión 16.8 facilitó la gestión del estado y efectos en componentes funcionales. Empecemos abordando el Hook useState:

¿Qué es useState y cómo lo implementamos?

useState es un Hook que permite agregar el estado de React a componentes funcionales. Es una función que retorna un par: el valor actual del estado y una función para actualizarlo. Así es como se ve su implementación básica:

const [loading, setLoading] = useState(false);

• loading es la variable que mantiene el estado actual. En el ejemplo, comienza como false, lo que implica que la aplicación no está en un estado de carga por defecto.
• setLoading es la función que se utiliza para cambiar el valor de loading.

Este estado es reactivo, cualquier cambio en loading provocará que el componente se vuelva a renderizar.

¿Cómo manejar efectos con el Hook useEffect?

Tras comprender useState, es crucial hablar sobre los efectos y cómo se manejan en los componentes funcionales.

¿Qué hace el Hook useEffect?

useEffect permite ejecutar efectos secundarios en componentes funcionales. Estos efectos pueden realizarse después de que el DOM se haya actualizado, lo que es ideal para llamadas a API, suscripciones, o simplemente acciones que quieras ejecutar en respuesta a cambios en el componente o su estado.

Implementando useEffect en nuestros componentes

Para usar useEffect, debemos proporcionar una función que contenga el efecto que queremos ejecutar y una lista de dependencias que determinará cuándo debe volver a ejecutarse el efecto:

useEffect(() => {
  console.log('Empezando el efecto');

  const timer = setTimeout(() => {
    console.log('Ejecutando efecto: actualización de estado u operación asincrónica');
    setLoading(false);
  }, 3000);

  return () => clearTimeout(timer);
}, [loading]);

En el ejemplo:

• Se inicia un temporizador cuando loading es verdadero.
• Después de 3 segundos, el estado se actualiza a false, simulando la respuesta de una solicitud.
• La función de limpieza con clearTimeout garantiza que no se deje ningún timer pendiente si el componente se desmonta.

Ejecutando efectos condicionalmente

Un aspecto crucial de useEffect es su capacidad para ejecutar efectos condicionalmente, basándose en su lista de dependencias.

¿Cómo controlamos cuándo se ejecuta un efecto?

Para que un efecto solo se ejecute bajo ciertas condiciones, utilizamos el segundo argumento de useEffect, la lista de dependencias:

• Pasando un arreglo vacío [], el efecto solo se ejecuta cuando el componente se monta y se desmonta, similar a componentDidMount y componentWillUnmount en componentes de clase.
• Si agregamos variables como loading al arreglo, el efecto se ejecutará cuando el componente se monte y cada vez que la variable loading cambie.

Asegurándose de que los efectos no se ejecuten innecesariamente

Es importante evitar la ejecución de efectos cuando no son necesarios, lo cual puede causar problemas de rendimiento y comportamientos inesperados. Implementar una condición dentro del efecto que verifique si es necesario ejecutar la lógica es una estrategia efectiva:

useEffect(() => {
  if (!loading) return;
  
  // Lógica a ejecutar cuando loading es true
}, [loading]);

En el ejemplo, el efecto solo se activa cuando loading es true, lo que previene la ejecución de la lógica de efectos cuando no es deseado.

El uso inteligente de estados y efectos en React es fundamental para el desarrollo de aplicaciones fluidas y responsive. Esperamos que este artículo te haya proporcionado una comprensión más clara de cómo utilizar useState y useEffect en tus proyectos. Recuerda, con la práctica y la exploración continúa de estas herramientas, podrás potenciar significativamente tus habilidades de desarrollo con React. ¡Sigue aprendiendo y experimentando!