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! 🥷
Top comments (0)