Problem Statement
Type useTransition/useDeferredValue interactions succinctly.
Explanation
useTransition returns a boolean pending flag and a startTransition callback. useDeferredValue returns a lagging version of a value. Type them from React so you get correct call signatures and states.
Code Solution
SolutionRead Only
import React, { useDeferredValue, useMemo, useTransition } from 'react';
function Search({ items }: { items: string[] }){
const [isPending, startTransition] = useTransition();
const [query, setQuery] = React.useState('');
const deferredQuery = useDeferredValue(query);
const filtered = useMemo(() => {
const q = deferredQuery.toLowerCase();
return items.filter(x => x.toLowerCase().includes(q));
}, [items, deferredQuery]);
return (
<div>
<input value={query} onChange={e => {
const v = e.currentTarget.value;
startTransition(() => setQuery(v));
}} />
{isPending && <span>Updating…</span>}
<ul>{filtered.map(x => <li key={x}>{x}</li>)}</ul>
</div>
);
}