TanStack Virtual - Lightning Fast React Pages

[@AustinDavisTech]

One thing I missed on the short horizontal virtualization snip, you want the width on the relative div to be the total size of the virtualizer, NOT the height! If you're wondering why it looks odd that's probably the reason. Also, I apologize if the audio sounds a bit different or not quite as crisp. I made some changes with my PC and lost all my mic settings in the process (unlucky) but I'll have all my settings reconfigured by the next video :)

[@chiragchhajed8353]

Man you make awesome videos, previously the Tanstack Query one and now this

[@jitxhere]

Amazing amazing video. Your way of explanation is very easy to follow. Keep making these please.

[@raymondray2520]

This is a super cool and most efficient way of rendering lager data, VERY COOL!

[@404-not-found-service]

Me parece genial este tipo de contenido, espero que puedas seguir subiendo material asi , tanto tanstack router como el query están increibles y no conocía el virtual, Tanstack esta haciendo las cosas super bien

[@bharatdubey83]

Waiting for your Node.js crash course.

[@armaandhanji2112]

Hey Austin. Can you make a video that shows how to use Tanstack Start? (Especially together with Tanstack Query). Thanks for the great content!

[@mazwrld]

quality video

[@farzadmf]

Nice video, wish you had a repo for the code you could share

[@yudis10]

Is there a way the list snap like using css scroll snap ?

[@Sayada]

Can you do all the demo in the tanstack like query, store and form ??

[@joseduargu]

Does anyone know how to start from bottom to top? Similar to chat apps

[@mohaymenul-islam]

awesome

[@enenotowitch628]

So I don't need "Infinite scroll pagination" now? Thx!

[@kencho564]

you do. if you don't do that then you load all data at once which takes more time than loading small chunks. this is to actually render only what's on the screen

[@enenotowitch628]

@@kencho564 thank you!

[@FatahChan]

How to do a grid?

[@AustinDavisTech]

Great question! You'd have to virtualize each row instead of each card, or at least that's the way I would do it. Your count would then be the number of rows, which should be Math.ceiling(numberOfItems / numberOfRows). Each row is absolutely positioned (just like our cards are) and maps over as many cards as that row can hold. Give me a few hours to get back to my computer and I'll share some code with you 🔥

[@AustinDavisTech]

Check this out: github.com/AustinDavisTech/tanstack-virtual/blob/main/src/App.tsx This is the simplest implementation I could think of, very similar to the dynamic virtualization example from the video, but making each mapped div a grid and ensuring we're mapping over grid columns and not individual cards. So it is not one big grid, but rather many small grids. You could in theory maintain one large grid by making the relative div a grid, and then still have each row mapped over and make the rows absolute. However the only issue with this is that when you make a child of a grid absolute, you're messing with automatic positioning/styling that grids do, since grid elements are generally static. You could manually recreate the grid look by messing with the 'left' CSS property for each row to correctly set the cards and their spacing, but at that point you're losing some of the visual benefits of grids IMO. TLDR; The code I provided should work well, creating many smaller grids. Creating one large grid from the relative div is possible, but it would take some finagling on the positioning of the row elements to make it work

[@inakilarramendi787]

You use two virtualizers, one for rows and one for columns

[@timattracts]

How do you virtualize a toaster? jk Fire 🔥 Video Hail TanStack

[@AustinDavisTech]

maybe try throwing it in the tub?

[@AustinDavisTech]

Your service for putting me on TanStack's game will never be forgotten 😎

[@timattracts]

@ when TanStack Start hits v1 it’s game over

[@AustinDavisTech]

@@timattracts oh absolutely

[@timattracts]

@@AustinDavisTech That did the trick, but now my toaster is fully virtualized-it’s mining, bitcoin and trying to sell me NFTs.