Blazor: StateHasChanged resets component state if it has child content

[akorchev]

Describe the bug

For some reason invoking the StateHasChanged method of a Blazor page resets component state only if the component has child content.

To Reproduce

Complete application: https://github.com/akorchev/blazor-state-lost

1. Add the following component to a default Blazor server-side application.

   <div style="border: 1px solid #ebebeb; margin: 16px; border-radius: 2px"    @onclick="@Toggle">
    Toggle (Expanded = @Expanded)
   
    @if (Expanded)
    {
        @ChildContent
    }
    </div>
   
    @code {
         [Parameter]
         public bool Expanded { get; set; }
   
         [Parameter]
         public RenderFragment ChildContent {get; set;}
   
         void Toggle()
         {
             Expanded = !Expanded;
         }
    }   

2. Add this to Index.razor

   @page "/"
   
    Welcome to your new app.
   
    <Expander Expanded="true">
          <h1>Hello, world!</h1>
    </Expander>
   
    <Expander Expanded="true" />
    <button @onclick="@(() => StateHasChanged())">StateHasChanged</button

3. Run the application and click on both component instances. They correctly update and show the current value of the Expanded property - False.
4. Click the StateHasChanged button. The first component resets to its initial state (expanded). The second keeps its state.

Here is a GIF showing my experience.

Note that only the component with child content is reset. Not sure if this is a bug or something by design. If it is the latter please suggest a workaround.

Further technical details

• ASP.NET Core version: 3.1.100-preview1-014459

[akorchev]

An update ... The state isn't actually lost. StateHasChanged() renders the component which has child content and as a result its Expanded property is set to the initial value from markup. Confirmed via debugger and overriding OnAfterRender - it is invoked only for the component that has child content.

[oiBio]

I think the problem here is, that you set the Expanded-Value with a fixed value, and use no binding. And the renderer just rerenders the one with child-content, because the child content could have changed, but the second expander without child content not (no parameters changed)

Possible Workarounds
1: Use private bools inside Expander.razor and set them only once (via OnInit) to keep state

Expander.razor

<div style="border: 1px solid #ebebeb; margin: 16px; border-radius: 2px" @onclick="@Toggle">
    Toggle (Expanded = @_expanded)

    @if (_expanded)
    {
        @ChildContent
    }
</div>

@code {
    [Parameter]
    public bool Expanded { get; set; }
    private bool _expanded { get; set; }

    [Parameter]
    public RenderFragment ChildContent {get; set;}


    protected override void OnInitialized()
    {
        _expanded = Expanded;
        base.OnInitialized();
    }

    void Toggle()
    {
        _expanded = !_expanded;
    }
}

2. Workaround Use Binding to keep state

Expander.razor

<div style="border: 1px solid #ebebeb; margin: 16px; border-radius: 2px" @onclick="@Toggle">
    Toggle (Expanded = @Expanded)

    @if (Expanded)
    {
        @ChildContent
    }
</div>

@code {
    [Parameter]
    public bool Expanded { get; set; }

    [Parameter]
    public EventCallback<bool> ExpandedChanged { get; set; }

    [Parameter]
    public RenderFragment ChildContent {get; set;}

    async void Toggle()
    {
        Expanded = !Expanded;
        await ExpandedChanged.InvokeAsync(Expanded);
    }
}

Index.razor

@page "/"


Welcome to your new app.

<Expander @bind-Expanded="expanded1">
    <h1>Hello, world!</h1>
</Expander>

<Expander @bind-Expanded="expanded2" />
<button @onclick="@(() => StateHasChanged())">StateHasChanged</button>

@code {
    bool expanded1 = true;
    bool expanded2 = true;
}

[akorchev]

@oiBio thank you for the comments! I ended up with a similar conclusion - Blazor probably renders components with child content "just in case".

Still I think the default behavior is unexpected. The workaround with using a private field won't allow setting the Expanded property after OnIinitialized. The second workaround is viable but a bit of an overkill for such a simple component. And again won't work if somebody sets Expanded="@expanded1".

[akorchev]

Here is a workaround for this issue. It does the following to make things work:

1. Keeps a separate field for the expanded state. The click event handler updates this field.
2. The field is initialized from the parameter property.
3. The field is also in sync with the parameter property by checking if the latter changed (in SetParametersAsync).

Here is my understanding of the situation.

1. Blazor always renders components that have children when StateHasChanged runs.
2. Rendering a component requires settings its properties (parameters).
3. If a parameter is used to store state (state here is something that the end-user can change) things get ugly. Blazor actually emits a compilation warning if a parameter property is set outside of a component (probably because of the exact same reasons). Maybe we should get warned if the parameter property is set inside the component too?

This whole pattern felt familiar. It is quite similar to the relationship between props and state in React (and SetParametersAsync looks a lot like componentWillReceiveProps).

So the moral of the story:

1. DO NOT USE PARAMETERS FOR STATE. Looks tempting, kind of works, but don't.

Still it will be very nice if the official documentation mentions the cases when a component is (re)rendered. Especially how having child components (RenderFragment properties) changes the behavior.

[mkArtakMSFT]

@guardrex can you please include some notes in our docs to cover this:

So the moral of the story:
DO NOT USE PARAMETERS FOR STATE. Looks tempting, kind of works, but don't.
Still it will be very nice if the official documentation mentions the cases when a component is > (re)rendered. Especially how having child components (RenderFragment properties) changes the behavior.