Used tanstack virtual to virtualize large element lists
The purpose of virtualization is rendering visible rows instead of all rows in large table to improve performance.
How it works:
- Give it a scrollable container
- Virtualizer tracks scroll position
- Calculates which items are visible based on size of item and size of container
- Return virtual row metadata of what it’s index is
Ex metadata:
[
{
index: 410,
start: 16400,
size: 40,
end: 16440
},
...
]
Optimizations:
- no react state updates per scroll, uses refs
- only renders new DOM nodes if viewport changes
- Overscan ensures no flicker
Additional functionalities:
- With index → reset scroll position
- overscan → rows to hide