Create a React virtualization/windowing component from scratch

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • react-virtualized

    React components for efficiently rendering large lists and tabular data

  • I know what you're thinking !! why re-invent (react-virtualized) the wheel, if there is already a battle-tested solution why even bother to create your own from scratch? well, the thing is most people don't even know how things work behind the scenes and that's dangerous!! for your code-base and for your knowledge as well. Not only will you be able to customize every single aspect of the final component, but you’ll also understand the existing limitations and what you could do to improve them, which will help you to become the best DEV you want to be. Before we get started there is some stuff you need to know first.

  • React

    The library for web and native user interfaces.

  • Not long ago, I was part of a development team that was creating a SAAS application that had to render a lot of data (The point of that particular module was to essentially mimic a social media). As each of the items was pretty heavy React components themselves, needless to say, we had to use render optimization techniques to improve the UI performance and Virtualization is one of the most used techniques throughout the industry. Today, I’ll explain the component I created back then in order to understand the nitty-gritty of the libraries used in most projects. This is a pretty advanced demo since I went over the usual implementation and added some enhancements of my own. and I’ll guide you through all the steps so you’ll get a solid understanding of the trickery behind this very performant solution. Rendering countless items with the breeze.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts