Virtualize your grids with React and Virtualform

#virtualization #windowing #react #grid

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>
  )
}