El hook useEffect permite sincronizar el componente con factores o servicios externos, incluyendo la obtención de datos, suscripciones, cambios manuales, entre otros.

Sintaxis:

El primer argumento (setup) es una función flecha que se ejecutará después de cada renderizado. El segundo argumento (dependencies) es un arreglo opcional de dependencias. Si se proporcionan las dependencies, el efecto solo se volverá a ejecutar si alguna de las dependencias ha cambiado desde el último renderizado. Si se omite el arreglo de dependencias, el efecto se ejecutará después de cada renderizado.

useEffect(setup, dependencies)

Dado que sabemos que setup debe ser una función flecha y dependencies debe ser un arreglo, obtenemos el siguiente registro del hook useEffect.

useEffect(() => {
  // Something that we need to do
  // after the component is rendered or updated
}, [<optional_dependencies>])

Ejemplo 1:

Crear el componente Articles, que utilizará el hook useEffect para asignar datos al estado articles. Esta es una excelente oportunidad para explorar la potente combinación de hooks de React.

import { useEffect, useState } from "react";
import fetchData from "../service/api";

const Articles = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetchData()
      .then((resp) => {
        setArticles(resp.jokes);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return (
    // Render some markup based on the articles data
  );
};

Dentro de este componente, se utiliza el hook useEffect para asegurar que el estado articles se complete con datos. Como se mencionó anteriormente, la función useEffect se ejecuta después de cada renderizado, garantizando que los datos se mostrarán al usuario si se obtienen. Esto asegura una experiencia de usuario fluida con contenido actualizado.

Explicación línea por línea:

• Línea 1: Se importan los hooks useEffect y useState de la biblioteca React para aprovechar su funcionalidad;
• Línea 2: Se importa la función fetchData desde "../service/api". Esta función se encarga de realizar una solicitud a la API y obtener datos;
• Línea 4: El componente Articles se define utilizando la sintaxis convencional de función;
• Línea 5: Se inicializa el estado utilizando el hook useState, representando el valor inicial de la variable articles. En este ejemplo, es un arreglo vacío;
• Líneas 7-15: Caso de uso real del hook useEffect;
  • Línea 7 y línea 15: es la sintaxis. Así es como se utiliza;
  • Línea 8: se llama a la función fetchData. Se espera que esta función realice una solicitud a la API y retorne una promesa;
  • Líneas 9-11: Cuando la promesa se resuelve (bloque then), recibe un objeto resp. Los datos se extraen de resp usando resp.jokes, que se asigna al estado articles mediante setArticles;
  • Líneas 12-14: Si ocurre un error durante la solicitud a la API (en el bloque catch), se registra en la consola usando console.error.
• Líneas 17-19: Se renderiza el marcado del componente.

Código completo de la aplicación:

Ejemplo 2:

Creación del componente Counter para rastrear el valor de counter. El objetivo es registrar el valor de la variable counter cada vez que cambie. Para lograrlo, se utilizará el hook useEffect con un arreglo de dependencias que contiene la variable counter.

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

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Count has changed:", count);
  }, [count]);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

Explicación línea por línea:

• Línea 1: Se importan los hooks useEffect y useState de la biblioteca de React para aprovechar su funcionalidad;
• Línea 3: La sintaxis convencional de función define el componente "Counter";
• Línea 4: Se inicializa el estado utilizando el hook useState, representando el valor inicial de la variable count. En este ejemplo, es 0;
• Líneas 6-8: El caso de uso real del hook useEffect;
  • Línea 7: esta lógica se ejecutará cada vez que cambie el valor en el array de dependencias. En este caso, es la variable count;
  • Línea 8: array de dependencias. Se indica a React que, cuando cambie el valor de la variable count, ejecute el código dentro de la función del hook useEffect.
• Líneas 14-19: Se renderiza el marcado del componente.

Código completo de la aplicación:

Tómese un momento para inspeccionar la consola y observar la lógica de ejecución de la función flecha dentro del hook useEffect. La función flecha se ejecuta primero en el renderizado inicial y luego se llama nuevamente cada vez que cambia el valor de la variable counter. Puede verificar este comportamiento observando los registros correspondientes en la consola.