Blazor Binary message size send from server to client increases

[partyelite]

Describe the bug

Let's say we have a list of items. When clicking on a item we want to display a content for that item. We setup an unordered list and when adding an item to list we create a div element that holds an item content but it's visibility is hidden until a user click on a list item. Clicking on another list item causes a current div to hide itself (not remove from DOM but set display attribute to none) and a new div corresponding to a list item to become visible.
When adding new list items and clicking on them a binary message size increases. I've read through the documentation and watched Blazor in more depth talk and I can't figure out why?

Looking at developer tools only thing that changes is display attribute on only two divs, no matter the current list items count.
If the diffing algorithm works as advertised I would expect the binary message received from server to have a constant size because only two attributes change or am I missing something

EDIT:
If you comment out a second foreach loop and click on the li item binary message size increases when adding more items to the list.
What is going on? I understand that a click event triggers a render but there are no changes on the DOM and the diffing algorithm shouldn't find any differences between current and new DOM state.

To Reproduce

Here is a simple code to reproduce the behaviour

<button @onclick="AddTenMore">Add ten items</button>
<br/>
<br/>
<div style="width:400px; float:left">
    <ul>
        @foreach (var item in Items)
        {
            <li @onclick="@(()=>SetActiveItem(item))">@item.Id</li>
        }
    </ul>
</div>
<div style="width:400px; margin-left:250px">
    @foreach(var item in Items)
    {
        <div @key="item.Id" style="display:@GetVisibility(item)">
            <div>This is content for item <b>@item.Id</b></div>
        </div>
    }
</div>
<br/>

@code {
    public List<ListItem> Items { get; set; } = new List<ListItem>();

    private ListItem ActiveItem { get; set; }

    public void AddTenMore()
    {
        for(var i = 0; i < 10; i++)
        {
            Items.Add(new ListItem()
            {
                Id = Guid.NewGuid().ToString()
            });
        }
    }

    public string GetVisibility(ListItem item)
    {
        if (ActiveItem == null)
            return "none";
        return item == ActiveItem ? "block" : "none";
    }

    public void SetActiveItem(ListItem item)
    {
        ActiveItem = item;
    }

    public class ListItem
    {
        public string Id { get; set; }
    }
}

Further technical details

• ASP.NET Core 3.1 in VS

[monterolebronhg]

The size is increasing because each time the items are rendered, a new delegate is being created to call the method SetActiveItem.

In your case, when you add 10 more items, the delegate in the onclick event is being created for all the items again, not just for the added elements.

[monterolebronhg]

This solution works for me:

<button @onclick="AddTenMore">Add ten items</button>
<br />
<br />
<div style="width:400px; float:left">
    <ul>
        @foreach (var item in Items)
        {
            <li @key="item.Id" @onclick="item.Action">@item.Id</li>
        }
    </ul>
</div>
<div style="width:400px; margin-left:250px">
    @foreach (var item in Items)
    {
        <div @key="item.Id" style="display:@GetVisibility(item)">
            <div>This is content for item <b>@item.Id</b></div>
        </div>
    }
</div>
<br />

@code {
    public List<ListItem> Items { get; set; } = new List<ListItem>();

    private ListItem ActiveItem { get; set; }

    public void AddTenMore()
    {
        for (var i = 0; i < 10; i++)
        {
            var item = new ListItem();

            item.Id = Guid.NewGuid().ToString();
            item.Action = () =>
            {
                SetActiveItem(item);
            };

            Items.Add(item);
        }
    }

    public string GetVisibility(ListItem item)
    {
        if (ActiveItem == null)
            return "none";
        return item == ActiveItem ? "block" : "none";
    }

    public void SetActiveItem(ListItem item)
    {
        ActiveItem = item;
    }

    public class ListItem
    {
        public string Id { get; set; }
        public Action Action { get; set; }
    }
}

[jspuij]

This is because the compiler generates an inner class, that is instantiated at the start of the foreach loop (the nearest scope) to capture the variables for the lambda:

[CompilerGenerated]
private sealed class <>c__DisplayClass0_0
{
	public ListItem item;

	public Counter <>4__this;

	internal void <BuildRenderTree>b__0()
	{
		<>4__this.SetActiveItem(item);
	}
}

Blazor need to keep references to which methods should be called on callback from JS. In this case this will be the <BuildRenderTree>b__0() method on an instance of <>c__DisplayClass0_0 that is recreated at each render.
The workaround is the solution as the method is now on the ListItem instance. It does not change anymore on every rerender.

[jspuij]

And this is the code in IL where a new instance is created inside the loop and subsequently the <>4__this field and item field are set on the instance:

// loop start (head: IL_0131)
IL_00ab: newobj instance void WebApplication2.Pages.Counter/'<>c__DisplayClass0_0'::.ctor()
IL_00b0: stloc.1
IL_00b1: ldloc.1
IL_00b2: ldarg.0
IL_00b3: stfld class WebApplication2.Pages.Counter WebApplication2.Pages.Counter/'<>c__DisplayClass0_0'::'<>4__this'
IL_00b8: ldloc.1
IL_00b9: ldloca.s 0
IL_00bb: call instance !0 valuetype [System.Collections]System.Collections.Generic.List`1/Enumerator<class WebApplication2.Pages.Counter/ListItem>::get_Current()
IL_00c0: stfld class WebApplication2.Pages.Counter/ListItem WebApplication2.Pages.Counter/'<>c__DisplayClass0_0'::item

[mkArtakMSFT]

Thanks for contacting us. We believe that the question you've raised have been answered. If you still feel a need to continue the discussion, feel free to reopen it and add your comments.