The @key directive is important when creating components dynamically by iterating list/IEnumerable. Adding the @key will ensure proper change detection and UI update in the collection of components.
<ul class="mt-5">
@foreach (var person in People)
{
<li @key="person.Id">@person.Id, @person.Name</li>
}
</ul>
Tip: Always use @key for components that are generated in a loop at runtime.
References
https://blazor-university.com/components/render-trees/optimising-using-key/
https://www.meziantou.net/optimizing-blazor-performance-using-the-key-directive.htm
https://www.syncfusion.com/faq/blazor/components/what-is-the-use-of-key-property