Virtualize your grids with React and Virtualform

When you have a grid of an unknown amount of cells, it's a good idea to virtualize it, specially if you expect that grid to display a great amount of data.

Take your phone's photo gallery as an example: it renders hundreds of thousands of photos without a sweat, and that's mostly only possible because of virtualization (sometimes referred to as 'windowing').

In a nutshell, virtualization — or windowing — is a technique of "unloading" things that aren't visible to the user (because these things are supposed to be needless at that moment) thus making your application perform better.

I won't dive deep into what virtualization is in this post; rather, I'd like to introduce you to Virtualform: an ultra-fast, responsive and headless virtualization engine I built for React.

Long story short, at Starchive, we were in need of a sophisticated way to virtualize our grids. The solutions out there were good, but we always felt that something was missing—which led us to build Virtualform, a solution that we love and satisfies all our needs, from the user experience to the bundle footprint.

To give you a glimpse of what @virtualform/grid looks like:

import { useGrid } from '@virtualform/grid' const App = () => { const { getRootProps, getWrapperProps, cells } = useGrid({ cells: { amount: 1000, width: 100, height: 100, }, }) const { style, ...rootProps } = getRootProps() return ( <div style={{ ...style, width: '100vw', height: 600 }} {...rootProps}> <div {...getWrapperProps()}> {cells.map((cell) => { return ( <div {...cell.getProps()}> <div>I am cell {cell.index}</div> </div> ) })} </div> </div> ) } 

Want to learn more? Read the docs and become a virtualization ninja! 🥷