Debounced Search with API

Question

Implement a search input that debounces and fetches results from an API.

Accepted Answer

import './index.css'; import React, { useState, useEffect } from 'react'; function App() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]); useEffect(() => { const handler = setTimeout(() => { if (query) { fetch('https://api.datamuse.com/words?ml=' + query) .then(res => res.json()) .then(data => setResults(data.map(d => d.word))); } else { setResults([]); } }, 500); return () => clearTimeout(handler); }, [query]); return (

Debounced Search

setQuery(e.target.value)} placeholder='Type to search...' />

{word}

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5f5; } * { box-sizing: border-box; } .debounce-demo { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; } .debounce-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .debounce-input { width: 100%; padding: 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; margin-bottom: 1rem; } .debounce-list { list-style: none; padding: 0; } .debounce-list li { padding: 0.5rem 0; border-bottom: 1px solid #e5e7eb; }