Reactive UI / Blazor: Why is a View that inherits from ReactiveInjectableComponentBase<T> rendered twice? - mvvm

Question

When I inherit a View from ReactiveInjectableComponentBase<T> the body of the View will be "rendered" twice. I noticed this because a #foreach loop was executed twice on activation of the view. This effect happens no matter how simple the View and the ViewModel are.
Simple reproduction repo: https://github.com/Lukzy/ReactiveUI.ExecutedTwiceBug
Bug filed on ReactiveUI GitHub: https://github.com/reactiveui/ReactiveUI/issues/3256
I used the following code to simulate the behavior.
ViewWithoutInherits: "View rendered" will be executed once.
#page "/whatever"
#using System.Diagnostics
#{
Trace.TraceInformation("View renderer");
}
ViewWithInherits: "View rendered" will be executed twice.
#page "/whatever"
#using System.Diagnostics
#inherits ReactiveInjectableComponentBase<ViewModel>
#{
Trace.TraceInformation("View renderer");
}
ViewModel
using ReactiveUI;
public class TestViewModel : ReactiveObject
{
}
Am I missing something or is this a bug? Any help or hint is highly appreciated.
UPDATE #1:
I replaced the trace code with the suggestion from Dylan Barquilla.
#code {
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
Trace.TraceInformation("View renderer in FIRST RENDER");
}
Trace.TraceInformation("View renderer");
base.OnAfterRender(firstRender);
}
}
Output from ViewWithoutInherits:
View renderer in FIRST RENDER
View renderer
Output from ViewWithInherits:
View renderer in FIRST RENDER
View renderer
View renderer
UPDATE #2:
ViewWithInherits: foreach-loop will be executed twice.
#page "/whatever"
#inherits ReactiveInjectableComponentBase<ViewModel>
#foreach (var value in ViewModel.Values)
{
<p>#(value)</p>
}
ViewWithInject: foreach-loop will be executed once.
#page "/whatever"
#foreach (var value in ViewModel.Values)
{
<p>#(value)</p>
}
#code {
[Inject]
public TestViewModel ViewModel { get; set; }
}
ViewModel
using ReactiveUI;
public class TestViewModel : ReactiveObject
{
public List<string> Values{ get; set; } = new()
{
"a",
"b"
};
}

Answer 1

EDIT 2: after cloning the repo, to prove what I want to say.
I just added a button on both components, with a simple handler (with no real effect).
<button #onclick="#OnClickHandler">Click on me</button>
//-- CODE PART --
public string Test { get; set; } = string.Empty;
private void OnClickHandler()
{
Test = "New";
}
You will see that every time you click on the button, the Foreach loop was executed [N] times will be updated with a two increments.
It is a perfect normal behavior in Blazor. A component being re render is a normal thing, and happen A LOT of time, basically every UI interaction can force the component to re render. So it should not cause you trouble, and Blazor has some useful methods (SetParametersAsync or OnInitialized) that can be used to apply logic only once, not every time the component is rendering.
If a component is inherit of another component, it could be the parent to cause this re rendering, by apply some logic (adding fields, updating fields etc.).
EDIT: I just checked the new outputs that you get, and I think the explanation is that the library that you use update or inject something in the component, after its first rendering, for example adding some fields on it or anything. It is a classic behavior with some other Blazor libraries, so I guess it is pretty normal - but you can ask in the Github / forum of the library you use to be sure.
So it basically means that if you want your code do be executed only once, I suggest you to use the following:
#code {
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
// Do whatever you need here, it will be executed only once
}
base.OnAfterRender(firstRender); // this line is important for Blazor lifecycle
}
}