How does the Blazor compiler generate sequence numbers?

Question

The Blazor Component Documentation advises that constant sequence numbers be used when building a custom RenderTree:

Generating the sequence numbers has lost all the useful information about where the if/else branches and loops were present in the original code. This results in a diff twice as long as before. ... In more realistic cases with complex and deeply nested structures, and especially with loops, the performance cost is more severe. Instead of immediately identifying which loop blocks or branches have been inserted or removed, the diff algorithm has to recurse deeply into the render trees and usually build far longer edit scripts because it is misinformed about how the old and new structures relate to each other.

So how does the Blazor compiler determine the sequence values for enumerated elements (i.e. elements repeated in a loop), given that the size of a collection cannot be determined at compile-time?

Answer 1

Below is how the Blazor compiler compiles .razor file with code defining a table element. Note that all the elements added inside a cycle have the same sequence number

protected override void BuildRenderTree(RenderTreeBuilder builder)
            {
                builder.OpenElement(0, "table");
                builder.OpenElement(1, "tbody");

                for (var row = 0; row < 3; row++)
                {
                    builder.OpenElement(2, "tr");
                    for (var col = 0; col < 3; col++)
                    {
                        builder.OpenElement(3, "td");
                        builder.AddAttribute(4, "class", "tictactoe-cell");
                        builder.CloseElement();
                    }

                    builder.CloseElement();
                }

                builder.CloseElement();
                builder.CloseElement();
            }
        }

I'd suggest you define a simple component with some text ("Blazor!"), and instantiate it dynamically in another component, the number of times the user enter into a textbox. Run and see if it works. Now go to the .g.cs file produced by the compiler and see what the compiler initially produced. Come and tell us about your experiment.

Your question is very important, and a proficiency of it is essential when we want to create, as for instance, a menu component based on data retrieved from a database, list of searched profile results, etc.

Hope this helps...