Virtualizer
Hover over one of the items with CPU 6x throttle and it's crazy slow despite
only re-rendering the ListItem
๐จโ๐ผ I've noticed that we're only rendering the top 500 matches and our users are
frustrated because they like scrolling for eternity. We tried to explain to
them about React's reconciliation and commit phases, but they just smiled, gave
us a high five and said "You're smart! I'm sure you can do this!" ๐คทโโ๏ธ
๐งโโ๏ธ I've removed the
.slice(0, 500)
and now we're
rendering all the items. Even without throttling your CPU, you should notice a
serious performance problem here any time there's any render of any kind. You'll
notice this especially when React needs to render all the items. For example,
you can type a search query, then clear it and you'll definitely notice it then.Go ahead and try doing some profiling if you like, but I think you know what you
need to do. You need to window this stuff! Run less code, and speed up your
component.
๐จโ๐ผ Ok, you should be good to go! Note that ๐ฐ Marty the Money Bag will be
holding your hand for some stuff a tiny bit for things that are specific to how
you integrate
downshift
and @tanstack/react-virtual
. ๐จ Kody the Koala will
be there to help you know what changes you need to make. Good luck!