React search bar debounce race conditions

Hard

You're building a search bar component that needs to suggest results as the user types. The component should minimize API calls and handle race conditions. What's missing in this implementation?

Choose an option below

useEffect(() => {
    const fetchSuggestions = async () => {
        setIsLoading(true);
        const response = await fetch(`/api/suggest?q=${query}`);
        const data = await response.json();
        setSuggestions(data);
        setIsLoading(false);
    };
    if (query) fetchSuggestions();
}, [query]);

useEffect(() => {
    const controller = new AbortController();
    const fetchSuggestions = async () => {
        if (query.length < 2) return setSuggestions([]);
        setIsLoading(true);
        try {
            const response = await fetch(`/api/suggest?q=${query}`, {
                signal: controller.signal
            });
            const data = await response.json();
            setSuggestions(data);
        } catch (err) {
            if (!err.name === 'AbortError') setSuggestions([]);
        }
        setIsLoading(false);
    };
    const timeoutId = setTimeout(fetchSuggestions, 300);
    return () => {
        controller.abort();
        clearTimeout(timeoutId);
    };
}, [query]);

useEffect(() => {
    let timeoutId;
    const fetchSuggestions = async () => {
        setIsLoading(true);
        const response = await fetch(`/api/suggest?q=${query}`);
        const data = await response.json();
        setSuggestions(data);
        setIsLoading(false);
    };
    if (query) {
        timeoutId = setTimeout(fetchSuggestions, 300);
    }
    return () => clearTimeout(timeoutId);
}, [query]);

const debouncedFetch = useCallback(
    debounce(async (q) => {
        setIsLoading(true);
        const response = await fetch(`/api/suggest?q=${q}`);
        const data = await response.json();
        setSuggestions(data);
        setIsLoading(false);
    }, 300),
    []
);
useEffect(() => {
    if (query) debouncedFetch(query);
}, [query, debouncedFetch]);

ReactDebounceFetchAbort controller

1function SearchBar({ onSearch }) {
  const [query, setQuery] = useState('');
  const [suggestions, setSuggestions] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
5
  _______________
7
  const handleInputChange = (e) => {
      const value = e.target.value;
      setQuery(value);
  };
12
  return (
      <div className="search-container">
          <input
              type="text"
              value={query}
              onChange={handleInputChange}
              placeholder="Search..."
              className={isLoading ? 'loading' : ''}
          />
          {suggestions.length > 0 &amp;&amp; (
              <ul className="suggestions">
                  {suggestions.map(item => (
                      <li key={item.id} onClick={() => onSearch(item)}>
                          {item.title}
                      </li>
                  ))}
              </ul>
          )}
      </div>
  );
33}

You're building a search bar component that needs to suggest results as the user types. The component should minimize API calls and handle race conditions. What's missing in this implementation?

Hint