react-virtualized

What is windowing?

Windowing or List virtualization is a concept of only rendering or write the visible portion in the current “ window ” to the DOM.

The number of items that rendered at first time are smaller than the original one.

The remaining items are rendered when you scroll down to it. The DOM nodes of items that exit the window are replaced by the new ones.

Why windowing is needed?

Without windowing, the entire list is written to the DOM including items that are not in the current window.

It means, you would have to wait until the entire list is written to see the first item.

This improves the performance of rendering a large list.

How to run the application?

npm install
npm start

Libraries Used

react-virtualized

react-window

react-virtualized-select

react-select