Fetching & Displaying Data

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  useEffect(() => {
    const debounced = debounce(async (searchQuery) => {
      if (searchQuery.length < 2) return;
      
      const response = await fetch(`/api/search?q=${encodeURIComponent(searchQuery)}`);
      const data = await response.json();
      setResults(data);
    }, 300);
    
    debounced(query);
    return () => debounced.cancel();
  }, [query]);