115Build a React scheduler demonstrating urgent updates versus startTransition() updates

Typing into a search box that filters a slow list freezes the input, because React renders the whole list for every keystroke before it can show the next character. Fix it with transitions.

Build <ProductSearch products={names} />:

• an <input aria-label="Search products"> whose value updates immediately on every keystroke (an urgent update);
• a filtered list of <SlowRow name={…} highlight={…} /> items (provided: each one takes about 1 ms to render and highlights the match) that is updated in a transition;
• <p data-testid="count">{n} results</p> for the list being shown;
• while the transition is pending, show <p role="status">Updating…</p> and keep the previous list visible (slightly dimmed).

Use two pieces of state: query (urgent, drives the input) and listQuery (set inside startTransition, drives the list).