El propósito del hook 'useEffect' en React

El hook useEffect es una característica esencial de la biblioteca de JavaScript React. Su propósito principal es proporcionar una forma para realizar efectos secundarios en componentes funcionales.

¿Qué son los efectos secundarios?

En el contexto de los componentes de React, los efectos secundarios son operaciones que afectan algo fuera del ámbito del renderizado, como la manipulación directa del DOM, el registro de suscripciones (como la petición de datos o la escucha de eventos), y muchas más. En las clases de componentes, estos efectos se realizaban típicamente en los métodos del ciclo de vida como componentDidMount, componentDidUpdate y componentWillUnmount.

¿Cómo funciona useEffect?

El hook useEffect simplifica la gestión de los efectos secundarios. Acepta dos argumentos: una función y una matriz de dependencias. La función contiene el código del efecto en sí. La matriz de dependencias determina cuándo se debe ejecutar el efecto. Si no se proporciona, el efecto se ejecutará después de cada renderizado. Si se proporciona una matriz vacía ([]), el efecto se ejecutará una vez después del primer renderizado (equivalente a componentDidMount). Si hay variables en la matriz de dependencias, el efecto se ejecutará cada vez que cambie cualquier variable de la matriz.

Ejemplos de uso del useEffect

A continuación se muestra un ejemplo básico de cómo se puede utilizar useEffect para realizar una solicitud de datos al montar un componente:

import React, { useState, useEffect } from 'react';

function MiComponente() {
  const [datos, setDatos] = useState(null);

  useEffect(() => {
    fetch('/mi-api')
      .then(res => res.json())
      .then(datosObtenidos => setDatos(datosObtenidos));
  }, []);  // <--- ¡Nota la matriz de dependencias vacía!

  return (
    <div>
      {datos ? `Datos obtenidos: ${datos}` : 'Cargando...'}
    </div>
  );
}

En este caso, el efecto secundario (la solicitud de datos) se realiza una vez cuando el componente se monta por primera vez.

Son muchos los casos de uso y prácticas recomendadas respecto a useEffect, como el manejo de promesas, el manejo de suscripciones, y el uso de múltiples efectos para separar preocupaciones. Siempre es importante recordar, sin embargo, que useEffect es para los efectos secundarios, y todo lo que no sea un efecto secundario —como cambiar el estado— debe realizarse fuera de useEffect.