` element.
Instead of rendering the entire list of flights at once, replace the [`foreach`](/dotnet/csharp/language-reference/keywords/foreach-in) loop in the preceding example with the `Virtualize` component:
* Specify `allFlights` as a fixed item source to
. Only the currently visible flights are rendered by the `Virtualize` component.
* Specify a context for each flight with the `Context` parameter. In the following example, `flight` is used as the context, which provides access to each flight's members.
```razor
```
If a context isn't specified with the `Context` parameter, use the value of `context` in the item content template to access each flight's members:
```razor
```
The `Virtualize` component:
* Calculates the number of items to render based on the height of the container and the size of the rendered items.
* Recalculates and rerenders the items as the user scrolls.
* Only fetches the slice of records from an external API that correspond to the current visible region, instead of downloading all of the data from the collection.
The item content for the `Virtualize` component can include:
* Plain HTML and Razor code, as the preceding example shows.
* One or more Razor components.
* A mix of HTML/Razor and Razor components.
## Item provider delegate
If you don't want to load all of the items into memory, you can specify an items provider delegate method to the component's parameter that asynchronously retrieves the requested items on demand. In the following example, the `LoadEmployees` method provides the items to the `Virtualize` component:
```razor
@employee.FirstName @employee.LastName has the
job title of @employee.JobTitle.
```
The items provider receives an , which specifies the required number of items starting at a specific start index. The items provider then retrieves the requested items from a database or other service and returns them as an along with a count of the total items. The items provider can choose to retrieve the items with each request or cache them so that they're readily available.
A `Virtualize` component can only accept **one item source** from its parameters, so don't attempt to simultaneously use an items provider and assign a collection to `Items`. If both are assigned, an is thrown when the component's parameters are set at runtime.
The following `LoadEmployees` method example loads employees from an `EmployeeService` (not shown):
```csharp
private async ValueTask> LoadEmployees(
ItemsProviderRequest request)
{
var numEmployees = Math.Min(request.Count, totalEmployees - request.StartIndex);
var employees = await EmployeesService.GetEmployeesAsync(request.StartIndex,
numEmployees, request.CancellationToken);
return new ItemsProviderResult(employees, totalEmployees);
}
```
instructs the component to rerequest data from its . This is useful when external data changes. There's no need to call when using .
## Placeholder
Because requesting items from a remote data source might take some time, you have the option to render a placeholder with item content:
* Use a (`...`) to display content until the item data is available.
* Use to set the item template for the list.
```razor
@employee.FirstName @employee.LastName has the
job title of @employee.JobTitle.
Loading…
```
## Item size
The height of each item in pixels can be set with (default: 50). The following example changes the height of each item from the default of 50 pixels to 25 pixels:
```razor
...
```
By default, the `Virtualize` component measures the rendering size (height) of individual items *after* the initial render occurs. Use to provide an exact item size in advance to assist with accurate initial render performance and to ensure the correct scroll position for page reloads. If the default causes some items to render outside of the currently visible view, a second re-render is triggered. To correctly maintain the browser's scroll position in a virtualized list, the initial render must be correct. If not, users might view the wrong items.
## Overscan count
determines how many additional items are rendered before and after the visible region. This setting helps to reduce the frequency of rendering during scrolling. However, higher values result in more elements rendered in the page (default: 3). The following example changes the overscan count from the default of three items to four items:
```razor
...
```
## State changes
When making changes to items rendered by the `Virtualize` component, call to force re-evaluation and rerendering of the component. For more information, see .
::: moniker-end
::: moniker range=">= aspnetcore-5.0 < aspnetcore-6.0"
Improve the perceived performance of component rendering using the Blazor framework's built-in virtualization support with the [`Virtualize` component](xref:Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize%601). Virtualization is a technique for limiting UI rendering to just the parts that are currently visible. For example, virtualization is helpful when the app must render a long list of items and only a subset of items is required to be visible at any given time.
Use the `Virtualize` component when:
* Rendering a set of data items in a loop.
* Most of the items aren't visible due to scrolling.
* The rendered items are the same size.
When the user scrolls to an arbitrary point in the `Virtualize` component's list of items, the component calculates the visible items to show. Unseen items aren't rendered.
Without virtualization, a typical list might use a C# [`foreach`](/dotnet/csharp/language-reference/keywords/foreach-in) loop to render each item in a list. In the following example:
* `allFlights` is a collection of airplane flights.
* The `FlightSummary` component displays details about each flight.
* The [`@key` directive attribute](xref:blazor/components/index#use-key-to-control-the-preservation-of-elements-and-components) preserves the relationship of each `FlightSummary` component to its rendered flight by the flight's `FlightId`.
```razor
@foreach (var flight in allFlights)
{
}
```
If the collection contains thousands of flights, rendering the flights takes a long time and users experience a noticeable UI lag. Most of the flights aren't rendered because they fall outside of the height of the `` element.
Instead of rendering the entire list of flights at once, replace the [`foreach`](/dotnet/csharp/language-reference/keywords/foreach-in) loop in the preceding example with the `Virtualize` component:
* Specify `allFlights` as a fixed item source to
. Only the currently visible flights are rendered by the `Virtualize` component.
* Specify a context for each flight with the `Context` parameter. In the following example, `flight` is used as the context, which provides access to each flight's members.
```razor
```
If a context isn't specified with the `Context` parameter, use the value of `context` in the item content template to access each flight's members:
```razor
```
The `Virtualize` component:
* Calculates the number of items to render based on the height of the container and the size of the rendered items.
* Recalculates and rerenders the items as the user scrolls.
* Only fetches the slice of records from an external API that correspond to the current visible region, instead of downloading all of the data from the collection.
The item content for the `Virtualize` component can include:
* Plain HTML and Razor code, as the preceding example shows.
* One or more Razor components.
* A mix of HTML/Razor and Razor components.
## Item provider delegate
If you don't want to load all of the items into memory, you can specify an items provider delegate method to the component's parameter that asynchronously retrieves the requested items on demand. In the following example, the `LoadEmployees` method provides the items to the `Virtualize` component:
```razor
@employee.FirstName @employee.LastName has the
job title of @employee.JobTitle.
```
The items provider receives an , which specifies the required number of items starting at a specific start index. The items provider then retrieves the requested items from a database or other service and returns them as an along with a count of the total items. The items provider can choose to retrieve the items with each request or cache them so that they're readily available.
A `Virtualize` component can only accept **one item source** from its parameters, so don't attempt to simultaneously use an items provider and assign a collection to `Items`. If both are assigned, an is thrown when the component's parameters are set at runtime.
The following `LoadEmployees` method example loads employees from an `EmployeeService` (not shown):
```csharp
private async ValueTask> LoadEmployees(
ItemsProviderRequest request)
{
var numEmployees = Math.Min(request.Count, totalEmployees - request.StartIndex);
var employees = await EmployeesService.GetEmployeesAsync(request.StartIndex,
numEmployees, request.CancellationToken);
return new ItemsProviderResult(employees, totalEmployees);
}
```
instructs the component to rerequest data from its . This is useful when external data changes. There's no need to call when using .
## Placeholder
Because requesting items from a remote data source might take some time, you have the option to render a placeholder with item content:
* Use a (`...`) to display content until the item data is available.
* Use to set the item template for the list.
```razor
@employee.FirstName @employee.LastName has the
job title of @employee.JobTitle.
Loading…
```
## Item size
The height of each item in pixels can be set with (default: 50). The following example changes the height of each item from the default of 50 pixels to 25 pixels:
```razor
...
```
By default, the `Virtualize` component measures the rendering size (height) of individual items *after* the initial render occurs. Use to provide an exact item size in advance to assist with accurate initial render performance and to ensure the correct scroll position for page reloads. If the default causes some items to render outside of the currently visible view, a second re-render is triggered. To correctly maintain the browser's scroll position in a virtualized list, the initial render must be correct. If not, users might view the wrong items.
## Overscan count
determines how many additional items are rendered before and after the visible region. This setting helps to reduce the frequency of rendering during scrolling. However, higher values result in more elements rendered in the page (default: 3). The following example changes the overscan count from the default of three items to four items:
```razor
...
```
## State changes
When making changes to items rendered by the `Virtualize` component, call to force re-evaluation and rerendering of the component. For more information, see .
::: moniker-end