.tip

Filtering a large list on every keystroke makes the input lag, because the list render blocks the input update. Defer the value the list uses.

const [query, setQuery] = useState("");
const deferred = useDeferredValue(query);
const results = useMemo(() => filter(items, deferred), [items, deferred]);

The input updates immediately with query. The list re-renders with deferred when React has time. No debounce timer, no stale closure.