Summary

In this chapter, we went over how Blazor handles the DOM manipulation process using an abstraction layer called RenderTree between the DOM and our components. We went over how things work inside Blazor, then built a component using purely C# with RenderTreeBuilder. Finally, we saw a new directive called @key that helps us have a more efficient rendering process and more predictable output when rendering collections.

So, after building components in the previous chapter, this one has completed the picture and has fed our curiosity. But the most important takeaways of this chapter are as follows:

• Blazor uses RenderTree to track changes in the UI, aggregate them, and apply them to the DOM efficiently.
• RenderTree doesn’t rerender the markup every time an update is made. It only updates what has changed in the UI.
• Use @key whenever you render a list of items, for example, within a foreach loop, to have a better-controlled rendering process.

The next...