Manejo de Efectos Secundarios con useEffect

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:

Creación del 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 de 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 usando el hook useState, representando el valor inicial de la variable articles. En este ejemplo, es un arreglo vacío;
• Líneas 7-15: El caso de uso real del hook useEffect;
  • Línea 7 y línea 15: es la sintaxis. Así es como se utilizará;
  • 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:

Creemos el componente Counter para rastrear un valor counter. La tarea es registrar el valor de la variable counter cada vez que cambie. Para lograr esto, utilizaremos 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 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 ocurrirá cada vez que el valor en el array de dependencias cambie. En este caso, es la variable count;
  • Línea 8: array de dependencias. Se indica a React que cuando el valor de la variable count cambie, 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:

Por favor, 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.