pacocoursey / cmdk

Fast, unstyled command menu React component.
https://cmdk.paco.me
MIT License
9.17k stars 262 forks source link

Command score computation extremely slow when item values are variable #148

Open tarngerine opened 1 year ago

tarngerine commented 1 year ago

I saw in one of the threads to support an always-present item like "New item" in a list of items, to use <Command.Item value={inputValue} /> so it's always in the filtered + ranked list

However, the default computation gets very slow with long inputs as you type more and more

Repro: https://codesandbox.io/s/xenodochial-poitras-d6nn6s?file=/src/App.tsx

  1. Focus input
  2. Type random garbage, like 'alksdjf lkawejf lkawej klawef lakwejf lkawejf lkawejf klawejf lkawejf lkawejf lkawejfl;kawefal;w efj;alkwe fklawje flkajwe flkawje flkawje f;lakwje f;lakwje flkawje fklawje fklajw elfja wekfl jaweklfj aklwej aklwejawe'
  3. Notice you start dropping tons of frames due to commandScore calculations taking 1+ seconds

Note this still happens even if you set shouldFilter = false

It's circumventable if you provide a custom filter function, though! So I am not blocked

tarngerine commented 1 year ago

OK I guess i didn't need to dynamically change Command.Item value if I'm doing custom filtering anyway... :D

tarngerine commented 1 year ago

but I think if you set shouldFilter={false} it shouldnt run command-score, no?

jackhkmatthewsBB commented 10 months ago

I also ran into this when rendering a dynamic Command.Item which matched the input value:

<Command.Item value={inputValue} />

Even with filtering={false} the custom filtering continued to run and drop frames.

As @tarngerine said, provide a custom filter function to work around it. e.g:

<CommandPrimitive shouldFilter={false} filter={() => 1} />