import React, { useMemo, useState, useTransition } from 'react'; const base = Array.from({ length: 2500 }, (_, i) => ({ id: i + 1, title: 'meetcode question ' + (i + 1) })); export default function App() { const [query, setQuery] = useState(''); const [isPending, startTransition] = useTransition(); const filtered = useMemo(() => { const q = query.trim().toLowerCase(); if (!q) return base; return base.filter((x) => x.title.includes(q)); }, [query]); function change(e) { const next = e.target.value; startTransition(() => setQuery(next)); } return ( <div style={{ padding: 16, width: 560 }}> <h2 style={{ marginTop: 0 }}>Transition filter</h2> <input onChange={change} placeholder='Type to filter...' style={{ width: '100%', padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} /> <div style={{ marginTop: 10, color: '#555' }}>{isPending ? 'Updating...' : 'Ready'} | Showing {filtered.length} items</div> <div style={{ marginTop: 12, border: '1px solid #eee', borderRadius: 14, padding: 12, height: 220, overflow: 'auto' }}> {filtered.slice(0, 70).map((x) => <div key={x.id}>{x.title}</div>)} </div> </div> ); }