Пример кода

// функция иммитации запроса на сервер
function fakeFetch(val: string) {
  return new Promise<string>(function (resolve) {
    setTimeout(function () {
      resolve(`Сервер получил сообщение: ${val}`);
    }, 1000);
  });
}

//  самый простой пример компонента
function App() {
  const [val, setVal] = useState('');
  const [response, setResponse] = useState('');

  const inputHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setVal(e.target.value);
    setResponse('');
  };

  const submitHandler = async () => {
    setVal('');
    setResponse('отправка ...');
    const resp = await fakeFetch(val);
    setResponse(resp);
  };

  return (
    <>
      <input type="text" value={val} onInput={inputHandler} />
      <button onClick={submitHandler}>Отправить</button>
      <p>{response}</p>
    </>
  );
}

Теперь перед нами встала задача заменить поведение: отправлять данные не по кнопке, а автоматически. Однако мы не может просто так повесить функцию в обработчик inputHandler(), мало того что он будет неоправданно часто отправлять запросы на сервер, так еще и будет сбивать значение val. Но если мы добавить функцию debounce(), то она решит эти вопросы.

Функция debounce()

debounce() - это функция-обертка, которая ограничивает число выполнений переданной в нее функции, некоторым промежутком времени. Если точнее, то, пока промежуток времени не прошел, то зарегистрированная функция не будет исполнятся, а пока она не исполнилась, новый вызов функции будет замещать старый, исключая повторное выполнение.

пример:

function debounce(func, delay: number) {
  let timeoutId: number;

  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
}

Как правильно использовать в React компоненте

function App() {
  const [val, setVal] = useState('');
  const [response, setResponse] = useState('');

  const inputHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setVal(e.target.value);
    setResponse('');

    debounceHandler();
  };

  const submitHandler = useCallback(async () => {
    setResponse('отправка ...');
    const resp = await fakeFetch(val);
    setVal('');
    setResponse(resp);
  }, []);

  const debounceHandler = useMemo(() => {
    return debounce(submitHandler, 800);
  }, [submitHandler]);

  return (
    <>
      <input type="text" value={val} onInput={inputHandler} />
      {/* <button onClick={submitHandler}>Отправить</button> */}
      <p>{response}</p>
    </>
  );
}

При изменении стейта функциональный компонент вызывает свою функцию каждый раз, и без мемоизации мы бы получали каждый раз новый обработчик debounceHandler() и submitHandler(). Но для того чтобы все работало нам необходимо передать одну функцию в debounce один раз!

Поэтому мемоизируем submitHandler() через useCallback (линтер обычно потребует указать submitHandler как зависимость debounceHandler) и саму функцию debounceHandler() в useMemo, (т.к debounce() возвращает функцию)