Как разработчики React, мы часто сталкиваемся со сценариями, когда несколько быстрых изменений состояния необходимо синхронизировать с API. Вызов API для каждого крошечного изменения может быть неэффективным и обременительным как для клиента, так и для сервера. Именно здесь в игру вступают устранение дребезга и умное управление состоянием. В этой статье мы создадим собственный перехватчик React, который захватит параллельные вызовы обновления API путем объединения полезных данных и устранения отказов вызова API.

Проблема

Представьте поле ввода, в котором пользователи могут изменять настройки или предпочтения. Каждое нажатие клавиши или изменение может вызвать вызов API для сохранения нового состояния. Если пользователь вносит несколько изменений подряд, это может привести к потоку запросов к API:

• Неэффективное использование сетевых ресурсов.
• Возможные условия гонки.
• Ненужная нагрузка на сервер.

Введите устранение дребезга

Устранение дребезга — это метод, используемый для ограничения скорости срабатывания функции. Вместо немедленного вызова функции вы ждете определенный период бездействия перед ее выполнением. Если до истечения задержки поступает другой вызов, таймер сбрасывается.

Зачем использовать устранение дребезга?

• Улучшение производительности: уменьшает количество ненужных вызовов API.
• Оптимизация ресурсов: минимизирует нагрузку на сервер и использование сети.
• Улучшенный пользовательский интерфейс: предотвращает задержку и потенциальные ошибки при быстрых последовательных вызовах.

Роль использованияRef

В React useRef — это перехватчик, который позволяет сохранять изменяемые значения между рендерингами, не вызывая повторный рендеринг. По сути, это контейнер, содержащий изменяемое значение.

Зачем использовать useRef здесь?

• Сохранение накопленных обновлений: нам нужно отслеживать накопленные обновления между рендерингами, не вызывая повторных рендерингов.
• Доступ к изменяемому текущему значению: useRef дает нам свойство .current, которое мы можем читать и писать.

Хук useDebouncedUpdate

Давайте углубимся в код и поймем, как все это устроено.

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;

Разрушая это

1. Накопление обновлений с помощью useRef

Мы инициализируем useRef, называемый накопленными обновлениями, для хранения объединенных параметров всех входящих обновлений.

const накопленныеUpdates = useRef(ноль);

2. Отказ от вызова API

Мы создаем функцию обработки обновлений с функцией устранения дребезга, используя утилиту устранения дребезга из пользовательского интерфейса Material.

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

• Зачем использовать useRef для ProcessUpdates? Мы используем useRef, чтобы гарантировать, что функция устранения дребезга не будет воссоздаваться заново при каждом рендеринге, что привело бы к сбросу таймера устранения дребезга.

3. Обработка обновлений с помощью useCallback

Функция handleUpdate отвечает за сбор обновлений и запуск вызова API для устранения дребезга.

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

• Объединение параметров: мы объединяем новые параметры со всеми существующими, чтобы обеспечить запись всех обновлений.
• Триггер отладки: каждый раз, когда вызывается handleUpdate, мы запускаем процессUpdates(), но фактический вызов API откатывается.

4. Очистка с помощью useEffect

Мы очищаем функцию устранения дребезга при размонтировании компонента, чтобы предотвратить утечку памяти.

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

Как это работает

1. Накопление параметров: каждое обновление добавляет свои параметры в накопленныйUpdates.current, объединяясь с любыми существующими параметрами.
2. Выполнение устранения дребезга: процессUpdates ожидает задержки в миллисекундах бездействия перед выполнением.
3. Вызов API: по истечении времени устранения дребезга вызывается apiUpdate с объединенными параметрами.
4. Сбросить накопленные обновления: после вызова API мы сбрасываем значение накопленных обновлений.current в значение null.

Пример использования

Вот как вы можете использовать этот хук в компоненте:

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);
}

• Действия пользователя: Когда пользователь вводит или переключает настройки, вызывается handleChange.
• Отмененные обновления: изменения накапливаются и отправляются в API после 500 мс бездействия.

Заключение

Объединив устранение дребезга с накоплением состояния, мы можем создавать эффективные и быстро реагирующие приложения. Хук useDebouncedUpdate гарантирует, что быстрые изменения группируются вместе, сокращая ненужные вызовы API и повышая производительность.

Основные выводы:

• Устранение дребезга необходимо для управления быстрыми последовательными вызовами.
• useRef позволяет нам поддерживать изменяемое состояние, не вызывая повторной визуализации.
• Пользовательские хуки, такие как useDebouncedUpdate, инкапсулируют сложную логику, делая компоненты более чистыми и удобными в обслуживании.

Не стесняйтесь интегрировать этот крючок в свои проекты и настраивать его в соответствии со своими конкретными потребностями. Приятного кодирования!