Virtualizer
Loading "Virtualizer"
Run locally for transcripts
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!
