Performance

SuggestMenu is built to handle large lists. Fuse.js ranks the full dataset; maxResults caps how many items are actually rendered. Highlight state is updated imperatively on arrow key navigation to avoid re-renders.

maxResults

Set maxResults (e.g. 50) so only the top N matches are rendered. Fuse still scores the full list; you get smooth keyboard navigation over a small DOM list.

Imperative highlight

When the user moves with Arrow Up/Down, the highlighted index is applied via DOM updates (e.g. data-highlighted) without forcing a full React re-render of the list. This keeps navigation smooth with many items.

Demos

1,000 items — keyboard navigation stays smooth. 1,000 items with maxResults: 50 — only top 50 rendered. 3,000 items stress test. See Storybook for interactive examples.