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...