Frontender Libs - обзор библиотек JS / CSS

Отложенное выполнение эффектов

Для эффектов, срабатывающих с задержкой после изменений, создают хук useDebouncedEffect. Он инкапсулирует логику setTimeout внутри useEffect. При обновлении зависимостей хук отменяет предыдущий таймер и устанавливает новый, вызывая колбэк по истечении задержки. Важную роль играет функция очистки useEffect, отвечающая за сброс таймера.

import { useEffect, useState } from 'react';

const useDebouncedEffect = (effect, deps, delay) => {
  useEffect(() => {
    const handler = setTimeout(() => effect(), delay);
    return () => clearTimeout(handler);
  }, [...(deps || []), delay]);
};

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');

  useDebouncedEffect(() => {
    // Логика отправки запроса на сервер
    console.log(`Отправка запроса: ${searchTerm}`);
  }, [searchTerm], 500);

  return (
    <input
      type="text"
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="Поиск..."
    />
  );
}

👉 @sWebDev

❤2👍1

www.tgoop.com/sWebDev/3906

939 viewsJul 28 at 08:11

Отложенное выполнение эффектов

Для эффектов, срабатывающих с задержкой после изменений, создают хук useDebouncedEffect. Он инкапсулирует логику setTimeout внутри useEffect. При обновлении зависимостей хук отменяет предыдущий таймер и устанавливает новый, вызывая колбэк по истечении задержки. Важную роль играет функция очистки useEffect, отвечающая за сброс таймера.

import { useEffect, useState } from 'react';

const useDebouncedEffect = (effect, deps, delay) => {
  useEffect(() => {
    const handler = setTimeout(() => effect(), delay);
    return () => clearTimeout(handler);
  }, [...(deps || []), delay]);
};

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');

  useDebouncedEffect(() => {
    // Логика отправки запроса на сервер
    console.log(`Отправка запроса: ${searchTerm}`);
  }, [searchTerm], 500);

  return (
    <input
      type="text"
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="Поиск..."
    />
  );
}

BY Frontender Libs - обзор библиотек JS / CSS