when is virtualization neccessary
I have an array of 873 objects and im wondering if virtualization is needed, it also needs to be responsive and change the amount of rows/collumns based on the users screen size
8 Replies
an example screenshot for reference
Virtualisation is necessary when you can’t get good enough performance otherwise
And can’t paginate
What is good enough performance? You decide!
Some of these virtualization libs are also a nightmare to read about
😭
Its a specific way of doing it with some quirks you have to work around. If i can avoid it i generally do
do you have any recommendations on an infinite scrolling paginator in react?
like it maps out 100 items, then when u scroll to the bottom it renders out another 100, etc.
i could probably actually implement this myself with hooks and a ref
my beloved https://tanstack.com/virtual/v3
TanStack Virtual | React Virtual, Solid Virtual, Svelte Virtual, Vu...
Headless UI for virtualizing large element lists with TS/JS, React, Solid, Svelte and Vue
if u are fetching stuff, react query has an infinite query for this use case. u will have to write out the part where it loads more data tho
also this is pretty easy, u just need to use intersection observer and observe the last item in ur list or a dummy 1px transparent item and call the logic whenever the intersection observer is able to see it fully
nah its local data
well that makes it easier