TypeScriptSearchList.tsx
Copy
1
import { useState, useTransition, useMemo } from 'react';
2
 
3
const ALL_ITEMS = Array.from({ length: 5000 }, (_, i) => `Item ${i + 1}: keyword-${i % 100}`);
4
 
5
export function SearchList() {
6
  const [query, setQuery] = useState('');
7
  const [filterQuery, setFilterQuery] = useState('');
8
  const [isPending, startTransition] = useTransition();
9
 
10
  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
11
    const value = e.target.value;
12
    setQuery(value);  // Urgent: input updates immediately
13
 
14
    startTransition(() => {
15
      setFilterQuery(value);  // Non-urgent: can be deferred/interrupted
16
    });
17
  }
18
 
19
  const filtered = useMemo(
20
    () => ALL_ITEMS.filter(item => item.includes(filterQuery)),
21
    [filterQuery]
22
  );
23
 
24
  return (
25
    <div>
26
      <input
27
        value={query}
28
        onChange={handleChange}
29
        placeholder="Search 5000 items..."
30
        className="border p-2 w-full mb-4"
31
      />
32
      {isPending && <p className="text-blue-500">Updating results...</p>}
33
      <p className="text-sm text-gray-500 mb-2">{filtered.length} results</p>
34
      <ul className="h-96 overflow-auto">
35
        {filtered.slice(0, 100).map((item, i) => (
36
          <li key={i} className="p-1 border-b text-sm">{item}</li>
37
        ))}
38
      </ul>
39
    </div>
40
  );
41
}