React - Search (AJAX)

const { useEffect, useRef, useState } = React;
function Search(){
  const [q, setQ] = useState('');
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const tRef = useRef(null);
  const ctlRef = useRef(null);
  useEffect(() => {
    if (tRef.current) clearTimeout(tRef.current);
    if (!q) { setItems([]); setError(''); setLoading(false); return; }
    tRef.current = setTimeout(async () => {
      try {
        setLoading(true); setError('');
        if (ctlRef.current) ctlRef.current.abort();
        ctlRef.current = new AbortController();
        const res = await fetch(`https://dummyjson.com/products/search?q=${encodeURIComponent(q)}`, { signal: ctlRef.current.signal });
        if (!res.ok) throw new Error('Network error');
        const data = await res.json();
        setItems(data.products || []);
      } catch (e) {
        if (e.name !== 'AbortError') setError(e.message || 'Error');
      } finally {
        setLoading(false);
      }
    }, 400);
    return () => { if (tRef.current) clearTimeout(tRef.current); };
  }, [q]);
  return (
    <div>
      <input placeholder="Search products" value={q} onChange={e => setQ(e.target.value)} />
      {loading && <span style={{marginLeft:8}}>Loading...</span>}
      {error && <div style={{color:'salmon'}}>{error}</div>}
      <ul>{items.map(p => <li key={p.id}>{p.title}</li>)}</ul>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('try-search')).render(<Search />);