¿Qué son los efectos en React?

¿Qué son los efectos en React.js y cómo nos pueden ayudar?

Los efectos en React.js son una herramienta crucial para manejar lógicas complicadas, como consultas a APIs o procesos que pueden retrasarse. Estas operaciones deben ejecutarse únicamente cuando es estrictamente necesario, evitando que se repitan en cada renderización del componente. Los efectos permiten encapsular estas lógicas para que se ejecuten sólo una vez, por ejemplo, al primer render. Así mejora la eficiencia y rendimiento de nuestras aplicaciones.

¿Cómo encapsular lógicas pesadas con useEffect?

Para utilizar los efectos en React, empleamos el hook useEffect. Vamos a ver cómo podemos integrarlo en nuestra aplicación a través del siguiente ejemplo:

import React, { useEffect } from 'react';

function MiComponente() {
  useEffect(() => {
    console.log("Este efecto se ejecuta únicamente una vez.");
  }, []);

  return <div>Mi componente</div>;
}

• Primer argumento: Recibe una función que encapsula la lógica que queremos ejecutar.
• Segundo argumento: Es un array de dependencias que determina cuándo se debe ejecutar el efecto.

¿Qué sucede con el orden de ejecución en los efectos?

Al encapsular una parte de nuestra lógica dentro de useEffect, el orden de ejecución cambia. La lógica del efecto se ejecuta después del resto del código en el componente:

console.log('log1');
useEffect(() => {
  console.log('log2');
}, []);
console.log('log3');

Los logs se imprimen en este orden:

1. log1
2. log3
3. log2

Esto ocurre porque el efecto se ejecuta después del render inicial.

¿Cómo influye el array de dependencias?

El array de dependencias dentro de useEffect decide si el efecto debe ejecutarse después de cada render o sólo bajo ciertas condiciones. Si se proporciona un array vacío, el efecto se ejecuta únicamente una vez, al montar el componente:

useEffect(() => {
  console.log("Efecto con array vacío, ejecutado una vez.");
}, []);

Si incluimos dependencias, el efecto se ejecutará cada vez que las dependencias cambien:

useEffect(() => {
  console.log("Efecto ejecutado cada vez que 'estado' cambia.");
}, [estado]);

Aquí, el efecto se desencadena siempre que el valor de estado se modifica.

Casos prácticos: Cargando datos de APIs en React

Un uso común de useEffect es gestionar estados de carga y error al recuperar datos de APIs:

function ComponenteEjemplo() {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        let response = await fetch('https://api.example.com/data');
        let result = await response.json();
        setData(result);
        setLoading(false);
      } catch (error) {
        console.error("Error al cargar los datos", error);
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  if (loading) return <p>Cargando...</p>;
  return <div>{data ? data.message : "Error al cargar información"}</div>;
}

• Estado inicial de carga: Indicamos al usuario que los datos están en proceso de cargarse.
• Actualización basada en promesas: Una vez que la respuesta de API es recibida, actualizamos el estado y causamos un nuevo render.
• Evitar llamadas innecesarias: Usamos un array vacío para que el efecto sólo realice la llamada una vez.

Mejoras en la experiencia del usuario

Implementar useEffect no solo mejora la eficiencia de nuestra aplicación sino también la experiencia del usuario. La aplicación responde más ágilmente, evitando esperas innecesarias o sobrecarga de procesos. Introduce mejoras simples, pero significativas en el desempeño y usabilidad. Además, asegúrate de mantener una buena práctica en la gestión de estados para ofrecer a los usuarios interacciones fluidas y efectivas.