Como desarrolladores de React, a menudo nos enfrentamos a escenarios en los que es necesario sincronizar múltiples cambios de estado rápidos con una API. Realizar una llamada API para cada pequeño cambio puede resultar ineficiente y agotador tanto para el cliente como para el servidor. Aquí es donde entran en juego la prevención de rebotes y la gestión inteligente del Estado. En este artículo, crearemos un gancho de React personalizado que captura llamadas de actualización de API paralelas fusionando cargas útiles y eliminando el rebote de la llamada de API.

El problema

Imagine un campo de entrada donde los usuarios puedan ajustar la configuración o las preferencias. Cada pulsación de tecla o ajuste podría desencadenar una llamada API para guardar el nuevo estado. Si un usuario realiza varios cambios en rápida sucesión, esto podría generar una avalancha de solicitudes de API:

• Uso ineficiente de los recursos de la red.
• Posibles condiciones de carrera.
• Carga innecesaria en el servidor.

Entrar antirrebote

Antirrebote es una técnica utilizada para limitar la velocidad a la que se puede activar una función. En lugar de llamar a la función inmediatamente, espera un cierto período de inactividad antes de ejecutarla. Si entra otra llamada antes de que termine el retraso, el cronómetro se reinicia.

¿Por qué utilizar el sistema antirrebote?

• Mejora del rendimiento: Reduce la cantidad de llamadas API innecesarias.
• Optimización de recursos: Minimiza la carga del servidor y el uso de la red.
• Experiencia de usuario mejorada: evita retrasos y posibles errores de llamadas rápidas y sucesivas.

El papel del usoRef

En React, useRef es un gancho que le permite conservar valores mutables entre renderizaciones sin activar una nueva renderización. Es esencialmente un contenedor que contiene un valor mutable.

¿Por qué utilizar useRef aquí?

• Actualizaciones acumuladas persistentes: Necesitamos realizar un seguimiento de las actualizaciones acumuladas entre renderizaciones sin provocar nuevas renderizaciones.
• Acceder al valor actual mutable: useRef nos proporciona una propiedad .current que podemos leer y escribir.

El gancho useDebouncedUpdate

Profundicemos en el código y comprendamos cómo se combina todo.

import { debounce } from "@mui/material";
import { useCallback, useEffect, useRef } from "react";

type DebouncedUpdateParams = {
  id: string;
  params: Record;
};

function useDebouncedUpdate( apiUpdate: (params: DebouncedUpdateParams) => void,
  delay: number = 300, ) {
  const accumulatedUpdates = useRef(null);

  const processUpdates = useRef(
    debounce(() => {
      if (accumulatedUpdates.current) {
        apiUpdate(accumulatedUpdates.current);
        accumulatedUpdates.current = null;
      }
    }, delay),
  ).current;

  const handleUpdate = useCallback(
    (params: DebouncedUpdateParams) => {
      accumulatedUpdates.current = {
        id: params.id,
        params: {
          ...(accumulatedUpdates.current?.params || {}),
          ...params.params,
        },
      };
      processUpdates();
    },
    [processUpdates],
  );

  useEffect(() => {
    return () => {
      processUpdates.clear();
    };
  }, [processUpdates]);

  return handleUpdate;
}

export default useDebouncedUpdate;

Desglosándolo

1. Acumulación de actualizaciones con useRef

Iniciamos un useRef llamado acumulatUpdates para almacenar los parámetros combinados de todas las actualizaciones entrantes.

actualizaciones acumuladas constantes = useRef(nulo);

2. Antirrebote de la llamada API

Creamos un proceso de función antirreboteActualizaciones utilizando la utilidad antirrebote de Material UI.

const processUpdates = useRef(
  debounce(() => {
    if (accumulatedUpdates.current) {
      apiUpdate(accumulatedUpdates.current);
      accumulatedUpdates.current = null;
    }
  }, delay),
).current;

• ¿Por qué usarRef para las actualizaciones de proceso? Usamos useRef para garantizar que la función antirrebote no se vuelva a crear en cada renderizado, lo que restablecería el temporizador de antirrebote.

3. Manejo de actualizaciones con useCallback

La función handleUpdate es responsable de acumular actualizaciones y activar la llamada API antirrebote.

const handleUpdate = useCallback(
  (params: DebouncedUpdateParams) => {
    accumulatedUpdates.current = {
      id: params.id,
      params: {
        ...(accumulatedUpdates.current?.params || {}),
        ...params.params,
      },
    };
    processUpdates();
  },
  [processUpdates],
);

• Fusionar parámetros: Fusionamos los nuevos parámetros con los existentes para garantizar que se capturen todas las actualizaciones.
• Activar antirrebote: cada vez que se llama a handleUpdate, activamos ProcessUpdates(), pero la llamada API real se antirrebota.

4. Limpiar con useEffect

Borramos la función antirrebote cuando el componente se desmonta para evitar pérdidas de memoria.

useEffect(() => {
  return () => {
    processUpdates.clear();
  };
}, [processUpdates]);

Cómo funciona

1. Acumular parámetros: Cada actualización agrega sus parámetros a acumulatUpdates.current, fusionándose con cualquier parámetro existente.
2. Ejecución antirrebote: ProcessUpdates espera un retraso de milisegundos de inactividad antes de ejecutarse.
3. Llamada API: Una vez transcurrido el tiempo antirrebote, se llama a apiUpdate con los parámetros combinados.
4. Restablecer actualizaciones acumuladas: Después de la llamada a la API, restablecemos las actualizaciones acumuladas.current a nulo.

Ejemplo de uso

Así es como puedes usar este gancho en un componente:

import React from "react";
import useDebouncedUpdate from "./useDebouncedUpdate";

function SettingsComponent() {
  const debouncedUpdate = useDebouncedUpdate(updateSettingsApi, 500);

  const handleChange = (settingName, value) => {
    debouncedUpdate({
      id: "user-settings",
      params: { [settingName]: value },
    });
  };

  return (
    

       handleChange("username", e.target.value)}
      />
       handleChange("notifications", e.target.checked)}
      />
    
  );
}

function updateSettingsApi({ id, params }) {
  // Make your API call here
  console.log("Updating settings:", params);
}

• Acciones del usuario: A medida que el usuario escribe o alterna configuraciones, se llama a handleChange.
• Actualizaciones rechazadas: los cambios se acumulan y se envían a la API después de 500 ms de inactividad.

Conclusión

Al combinar la eliminación de rebotes con la acumulación de estado, podemos crear aplicaciones eficientes y receptivas. El gancho useDebouncedUpdate garantiza que los cambios rápidos se agrupen, lo que reduce las llamadas API innecesarias y mejora el rendimiento.

Conclusiones clave:

• La eliminación de rebotes es esencial para gestionar llamadas sucesivas y rápidas.
• useRef nos permite mantener el estado mutable sin provocar re-renderizaciones.
• Los ganchos personalizados como useDebouncedUpdate encapsulan una lógica compleja, lo que hace que los componentes sean más limpios y fáciles de mantener.

Siéntete libre de integrar este gancho en tus proyectos y ajustarlo para adaptarlo a tus necesidades específicas. ¡Feliz codificación!