.tip

Filtering a big list on every keystroke makes the input lag, because rendering the list blocks the input update. Defer the value the list reads.

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

The input updates straight away with query, and the list re-renders with deferred when React has time. There's no debounce timer and no stale closure.