search

timc1 / kbar

fast, portable, and extensible cmd+k interface for your site
https://kbar.vercel.app
MIT License
4.79k stars 186 forks source link

Performance bug: Keystrokes lost when typing fast in slow environments #341

Closed ashharrison90 closed 10 months ago

ashharrison90 commented 10 months ago

hi! love the library ❤️

in slow environments (either on a low powered machine like a raspberry pi, or artificially slowed via chrome dev tools), keystrokes can be lost when typing into the search input.

this is hard/maybe impossible to reproduce in a small env like the kbar demo page because of how fast the rerenders are, but in a much bigger application like grafana...

Steps to reproduce

  1. go to play.grafana.org
  2. set 6x cpu slowdown in the performance tab of the chrome dev tools
  3. open search at the top (or use cmd+K)
  4. type fast
  5. notice dropped keystrokes

think the root cause is this bit of code in useStore: https://github.com/timc1/kbar/blob/main/src/useStore.tsx#L52-L55

because the subscribers are notified via a useEffect, they need an extra render to be updated. if another keystroke has come in before that useEffect has triggered, then when the onChange in KBarSearch runs it will have a stale value in event.target.value (because the value hasn't fed back down into KBarSearch yet) and the initial keystroke will be lost.

hope that makes sense! 🙏

ashharrison90 commented 10 months ago

also just noticed the fix for chinese input: https://github.com/timc1/kbar/pull/335

believe that will also fix this bug since it makes the state of the input local to the component instead of having to go via the pub/sub useEffect route in useStore

timc1 commented 10 months ago

Should be fixed in #335 – feel free to install the latest version!