> Как реализовать React компонент с текстовым полем для запроса к API, отображением результатов, индикатором загрузки и обработкой ошибок? (React)

Вот пример реализации компонента поиска с API, загрузкой и обработкой ошибок на React с использованием хуков:

JSX
import React, { useState, useEffect, useCallback } from 'react';

const SearchComponent = () => {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // Функция запроса к API
  const fetchResults = useCallback(async (searchQuery) => {
    if (!searchQuery.trim()) {
      setResults([]);
      return;
    }

    setLoading(true);
    setError(null);

    try {
      const response = await fetch(`https://api.example.com/search?q=${searchQuery}`);
      if (!response.ok) {
        throw new Error(`Ошибка HTTP: ${response.status}`);
      }
      const data = await response.json();
      setResults(data);
    } catch (err) {
      setError(err.message || 'Произошла ошибка при запросе');
      setResults([]);
    } finally {
      setLoading(false);
    }
  }, []);

  // Дебаунс для предотвращения частых запросов
  useEffect(() => {
    const timer = setTimeout(() => {
      fetchResults(query);
    }, 300);

    return () => clearTimeout(timer);
  }, [query, fetchResults]);

  const handleChange = (e) => {
    setQuery(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleChange}
        placeholder="Введите запрос..."
      />

      {loading && <div>Загрузка...</div>}

      {error && <div style={{ color: 'red' }}>Ошибка: {error}</div>}

      {!loading && !error && results.length > 0 && (
        <ul>
          {results.map((item, index) => (
            <li key={index}>{item.name || item.title}</li>
          ))}
        </ul>
      )}

      {!loading && !error && query && results.length === 0 && (
        <div>Результаты не найдены</div>
      )}
    </div>
  );
};

export default SearchComponent;

Ключевые моменты реализации:

• Использование useState для управления состоянием (запрос, результаты, загрузка, ошибка)
• useCallback для мемоизации функции запроса
• useEffect с дебаунсом (300 мс) для оптимизации количества запросов
• Обработка ошибок через try/catch с отображением сообщения пользователю
• Индикатор загрузки (loading) и пустое состояние при отсутствии результатов
• Очистка таймера при размонтировании компонента или изменении запроса