I’ve started coding again. For my first project, I’ve chosen to build yet another React virtual scrolling library. You can find it on GitHub and NPM.
Here’s why and how I built it. For more context, check out my general Front-End topic.
-
React Virtual Scroll
React Virtual Scroll 0.6.x : Consciously Uncoupling
As we discovered last time, traditional virtual scrolling implementations don’t work properly. Both React and the Chrome browser prioritize responsiveness when scrolling. New frames can be displayed before virtualized components have a chance to render updated content. Content appears torn or goes blank.
-
React Virtual Scroll
React Glitchy Virtual Scroll: Deep Dive
How can this be happening? I’m doing everything in my power to ensure that the visible content in my virtualized components is rendered before the browser paints. I’m using the legacy React render method which ensures that the DOM is updated immediately when an event is handled. I’ve restructured my spreadsheet component to ensure that everything is rendered before React returns to the event loop.
-
React Virtual Scroll
React Virtual Scroll : Scroll Options and Display List
It’s time for more enhancements to
react-virtual-scrolldriven by requirements fromreact-spreadsheet. If that seems a bit dull, don’t worry, things get wild by the time we reach the end. -
React Virtual Scroll
React Virtual Scroll 0.5.0 : Render Props
The 0.4.0 release of
react-virtual-scrollfocused on customization. Since then, I’ve learnt a lot from usingVirtualGridandVirtualListas building blocks for myreact-spreadsheetpackage. In particular, I learnt that the custom container component props introduced in 0.4.0 aren’t a good fit with modern React. -
React Virtual Scroll
Spreadsheets
React Virtual Scroll 0.4.0 : Customization
My
VirtualListandVirtualGridcomponents use the same approach as React-Window. A lean and mean implementation that focuses just on virtualization. This is not SlickGrid. The idea is that you can use customization to build whatever higher level functionality you need on top. -
React Virtual Scroll
React Virtual Scroll 0.3.0 : Paging Functional Test
I need a small test app with paged scrolling enabled to use for functional testing. I’ve talked previously about hacking the internal
useVirtualScrollcomponent to enable paged scrolling for small lists. I don’t want to have to keep doing that. Instead, I want to add the paging functional test as one of my set of permanent samples. -
React Virtual Scroll
Blog
React Virtual Scroll 0.2.0 : Horizontal List
Exciting news! React-Virtual-Scroll 0.2.0 is out, including the long anticipated
VirtualListhorizontal layout feature. -
React Virtual Scroll
Modern React Virtual Scroll Grid 9 : Fixing SlickGrid
Last time we integrated SlickGrid’s paged scrolling system and found that it came really close to working well.
-
React Virtual Scroll
Modern React Virtual Scroll Grid 8 : Unlimited Power!
I started on this journey when I couldn’t find an existing grid control that supports millions of rows and columns. Now I’m finally ready to integrate SlickGrid’s paged scrolling system. SlickGrid supports a virtually unlimited number of rows (but not columns).
-
React Virtual Scroll
Modern React Virtual Scroll Grid 7 : Grid
So far I’ve written six articles in this “Modern React Virtual Scroll Grid” series, with a four article detour into unit testing my work, all without attempting to make a grid. That changes today.
-
React Virtual Scroll
Modern React Virtual Scroll Grid 6 : ScrollTo
Now that we’ve got unit testing set up and achieved good coverage with our initial tests, it’s time to go back to the plan and implement the next feature on the list. This time we’re looking at providing
ScrollToandScrollToItemmethods for our virtual list control. -
React Virtual Scroll
Modern React Virtual Scroll Grid 5 : Is Scrolling
Next up on my list of features to implement is a
useIsScrollingcustom hook. It should be a good test of hook composition as I want to use it in conjunction with theuseVirtualScrollhook I’ve already implemented. -
React Virtual Scroll
Modern React Virtual Scroll Grid 4 : JSX
Last time I implemented a scalable binding interface and demonstrated an implementation for variable sized items. I was seemingly poised to complete the basic functionality for my list control and move onto grids. Then I got distracted.
-
React Virtual Scroll
Modern React Virtual Scroll Grid 3 : Item Offset Mapping
Last time, we created the basic structure for our scalable virtual scrolling controls built with modern React and TypeScript. The next job is to put a scalable data binding interface in place. We want the rendering costs for our controls to be proportional to the number of visible items, rather than the total number of items being scrolled over. We can’t control how the data and metadata being displayed is retrieved and managed, but we can make sure that the interface we provide is as efficient as possible.
-
React Virtual Scroll
Modern React Virtual Scroll Grid 2 : Basic Structure
I have a plan, I just need to start executing. Where to start? As you may have realized by my ratio of “writing about coding” vs “actually coding”, I have a tendency towards analysis paralysis. The solution that works for me is to pick a small but meaningful subset of what I want to achieve, get it working with a minimum of fuss, then iterate from there to add functionality and clean up any shortcuts.
-
React Virtual Scroll
Modern React Virtual Scroll Grid
Time to go again. I’ve learnt a lot about how best to implement virtual scrolling in React. I’ve got my head round modern React with Hooks. Now I’m going to implement my own super scalable virtual scrolling grid control using modern React with Typescript.
-
React Virtual Scroll
React Virtual Scroll Grid 5 : What Next?
It turns out that implementing a grid control capable of scrolling over millions of rows and columns is much harder than I thought. The grid is virtualized, so the browser only has to deal with the cells visible in the viewport. Right now, there’s no data. The content of each cell is generated on the fly.
-
React Virtual Scroll
Spreadsheets
React Virtual Scroll Grid 4 : Big Grid
After a long trip down the rabbit hole, I have two working implementations of a React based virtual scrolling list. No flicker, no going blank while scrolling.
-
React Virtual Scroll
React Virtual Scroll Grid 3 : Binary Chop
We’re on a journey, trying to find out why our simple React virtual scrolling list flickers and goes blank while you’re dragging the scroll handle. Last time, we ended when we found react-window, a mature library of virtual scrolling components that didn’t have any rendering problems when scrolling.
-
React Virtual Scroll
React Virtual Scroll Grid 2 : Down the Rabbit Hole
Last time I left you with a cliff hanger. Why is my simple virtualized scrolling list going blank if you scroll it too fast? I had some theories. Time to apply the scientific method and see which ones stand up.
-
React Virtual Scroll
React Virtual Scroll Grid
Last time, I bootstrapped Vite and scaffolded a React+Typescript project from a template. The observant amongst you will have noticed that I called the project “react-virtual-scroll-grid”. It may have had React in it, but there was no sign of any virtual scrolling grid.
-
Front End
Spreadsheets
React Virtual Scroll
Paged Infinite Virtual Scrolling
I’m working on a cloud spreadsheet system. It will support spreadsheets with millions of rows and columns. Potentially far more data than will fit into client memory, particularly a web client. Which means I need a front end implementation that can handle that.