[Blazor] How updates are performed at runtime

[arivoir]

I created a component that is calling StateHasChanged at runtime when modifications happen. And there are various causes that can end up invoking this method in different parts of the ui. I need to optimize it because repeated updates are affecting the performance visibly. So I'm wondering how the updates are performed, and whether there is a way to batch the updates. Can you provide information about this part of Blazor?

[pranavkm]

Calls to StateHasChanged are effectively batched by the Renderer. Invoking StateHasChanged while Blazor is already rendering would result in all consequent events to be batched until the next render is ready to be processed. We should document this behavior.

Was there anything more specific you wanted us to cover?

[arivoir]

@pranavkm I'm debugging a component and I see calling the StateHasChanged() calls the BuildRenderTree synchronously. It doesn't seem to be any asynchronous dispatch of the rendering.

The problem with this is, if I call the StateHasChanged() 4 times, it will perform the whole rendering 4 times. The StateHasChanged shouldn't invoke any rendering directly. It should mark the component as "dirty" and schedule a new rendering. This way if the same component was told to have changed 4 times in the same call, it will be re-rendered only one time.

The later should be a platform feature (All the ui frameworks have a kind of Invalidation mechanism). I'm sure this will improve the performance of the whole framework drastically. As well as simplifying components development.

For the time being. I would patch this problem inside the component, but I'm having trouble to understand how it works, and the lack of documentation about this doesn't help.

Hope it helps.

[arivoir]

@pranavkm

• Why does calling StateHasChanged in a parent doesn't update the children? How does this work?

• Why does calling StateHasChanged in 2 sibling components, in the same call, causes one of them to be updated firstly? There is a visible delay, even running the server locally. Is there any way I can ensure the 2 components will be updated together?

[arivoir]

I'm also needing a way to know when a component, and all its children are already created. Or similarly a method UpdateLayout, that I can call to force the layout to happen.

[Madhust]

Why does calling StateHasChanged in a parent doesn't update the children? How does this work?

@arivoir As far as i know, calling StateHasChanged in parent will be scoped to current component and its children. Hence it must do re-render for the current component and its decendent.

[mkArtakMSFT]

This is going to be covered by the docs, which we will implement in 5.0 timeframe.