Почему для выполнения запроса при изменении состояния стоит использовать useEffect, а не делать fetch прямо в обработчике onChange?

Почему useEffect, а не onChange?

В React обработчики событий, такие как onChange, выполняются синхронно во время рендера. Если в них разместить fetch, то каждый раз при изменении поля ввода будет запускаться новый запрос, что может привести к лавине запросов и ухудшению производительности. Кроме того, состояние компонента может измениться до завершения запроса, что приведет к гонке данных.

Роль useEffect

Хук useEffect предназначен для выполнения побочных эффектов после того, как компонент отрендерился. Это гарантирует, что запросы данных не блокируют рендер и выполняются только при изменении указанных зависимостей. useEffect также предоставляет механизм очистки (cleanup), который позволяет отменять предыдущие запросы, если зависимость изменилась до их завершения.

Пример кода

import { useState, useEffect } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (!query) return;
    const controller = new AbortController();
    const fetchData = async () => {
      try {
        const res = await fetch(`/api/search?q=${query}`, {
          signal: controller.signal
        });
        const data = await res.json();
        setResults(data);
      } catch (err) {
        if (err.name !== 'AbortError') console.error(err);
      }
    };
    fetchData();
    return () => controller.abort(); // отмена предыдущего запроса
  }, [query]);

  return (
    <input value={query} onChange={(e) => setQuery(e.target.value)} />
  );
}

Вывод

Использование useEffect для запросов при изменении состояния обеспечивает предсказуемое поведение, предотвращает гонки данных и позволяет эффективно управлять отменой запросов. Это особенно полезно в сценариях поиска с автодополнением или фильтрации, где важна производительность и актуальность данных.