DEV Community

Cover image for Virtualize your grids with React and Virtualform
Guilherme Oderdenge
Guilherme Oderdenge

Posted on

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more