GUÍA DE USO DEL HOOK USEEFFECT EN REACT

El hook useEffect de React es una herramienta poderosa que nos permite controlar los efectos secundarios en nuestros componentes. Los efectos secundarios son cualquier cambio de estado que no sea el resultado directo de una actualización de estado. Algunos ejemplos comunes de efectos secundarios incluyen:

• Realizar una petición HTTP para obtener datos de una API
• Escuchar eventos del teclado o del ratón
• Cambiar el título de la página

El hook useEffect nos permite controlar estos efectos secundarios de forma declarativa, lo que significa que podemos especificar exactamente cuándo deben ocurrir.

Un ejemplo de uso básico de useEffect podría ser el siguiente:

import { useEffect, useState } from 'react';

const MiComponente = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? (
        <div>{data.title}</div>
      ) : (
        <div>Cargando...</div>
      )}
    </div>
  );
}

En este ejemplo, estamos utilizando useEffect para realizar una petición HTTP cuando el componente se monta (es decir, cuando se inserta en el DOM). La segunda argumento es un array vacío, eso indica que el efecto solo se ejecutará una vez, cuando el componente se monte.

Podemos especificar también dependencias, es decir variables que indican que cuando cambian esas variables, se debe ejecutar nuevamente el efecto.
 

useEffect(() => {
    // efecto
}, [data]);

En este caso, cuando el valor de data cambia, el efecto se vuelve a ejecutar.

Es una herramienta esencial para controlar los efectos secundarios en nuestros componentes de React. Se utiliza para especificar cuándo deben ocurrir ciertos cambios de estado, como peticiones HTTP, escuchar eventos del teclado o del ratón, o cambiar el título de la página.