[2020-03-31] Concept of Virtualized Rendering
Libraries like React Virtualized or React Window and alike are meant to solve one and specific problem usually associated with rendering large lists and tabular data. That is efficient data rendering without sacrificing user experience.
Those who deal with extensive data rendering might be familiar with these libraries and concepts behind them and might already be using them in their projects. For those who are kinda new, I'd love to share some quick notes of what it is and how it can benefit one.
Given tabular or list data fits well within a viewport (think CSS overflow), it is possible to render only the visible rows and skip rendering the rest. This technique is called virtualization.
The biggest constraint of virtualization is that you need a viewport of some sort. You could treat even the browser window as such. Often, however, you set up something more limited. A simple way to achieve this is to fix width/height of a container and set overflow: auto property through CSS. The data will then be displayed within the container.
The greatest advantage of virtualization is that it cuts down the amount of rendering substantially. Often viewports are somewhat limited. Instead of thousands of rows, you will end up rendering tens of rows at the worst case. That is a massive difference even if you skip performing shouldComponentUpdate per row. The need for that simply disappears.