Ejemplo de uso del hook useEffect en React

El hook useEffect de React se utiliza para manejar efectos secundarios en componentes funcionales. Los efectos secundarios son operaciones que no deben interferir con la representación del componente, como la obtención de datos de una API, la suscripción a eventos o la manipulación del DOM.

La función useEffect acepta dos argumentos: una función que contiene el código del efecto secundario y una matriz de dependencias opcional. La función del efecto secundario se ejecuta después de que el componente se haya renderizado y, opcionalmente, cada vez que las dependencias especificadas cambien.

Código de ejemplo:

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

function ComponentExample() {
  const [posts, setPosts] = useState([]);

  // Efecto secundario para cargar datos cuando el componente se monta
  useEffect(() => {
    // Llamada a una API
    const fetchData = async () => {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/posts"
        );
        const data = await response.json();

        setPosts(data);
      } catch (error) {
        console.error("Error al obtener datos:", error);
      }
    };

    // Llamar a la función para cargar datos
    fetchData();
  }, []); // La matriz de dependencias está vacía,

  return <div>{/* Renderizar los datos si están disponibles */}</div>;
}

export default ComponentExample;

En este ejemplo, el efecto secundario se encarga de cargar datos de una API cuando el componente se monta por primera vez. La matriz de dependencias está vacía, por lo que el efecto se ejecutará solo una vez, al montar el componente. Si se incluyen dependencias en la matriz, el efecto se ejecutará cada vez que esas dependencias cambien. Esto ayuda a manejar casos en los que necesitas actualizar el componente en respuesta a cambios específicos.