Using virtualization

There are times when we need to work with a large collection of items. In those cases, it is not efficient to render each item. It is much more efficient to only render a subset of the items. This technique is called virtualization.

The built-in Virtualize component is used to render the visible items of a collection. Specifically, it is used when we are using a loop to render a collection of items and using scrolling to limit the number of items visible at any given moment. The Virtualize component calculates the list of visible items and only renders those items. Since it does not render items that are invisible, it is more performant than using a method that renders every item in the collection. It can be found in the Microsoft.AspNetCore.Components.Web.Virtualization namespace.

IMPORTANT NOTE

When using the Virtualize component, all the items must be the same height in pixels.

The Virtualize<TItem> class includes the following...