[Blazor] PersistentState throws ArgumentException when using multiple instances of the same component

[mikermnv]

PersistentState throws ArgumentException with multiple component instances

Describe the issue
When using [PersistentState] inside a reusable component that is rendered multiple times on the same page, Blazor throws the following exception rendering this page:

System.ArgumentException: There is already a persisted object under the same key at Microsoft.AspNetCore.Components.Infrastructure.PersistentValueProviderComponentSubscription.PersistProperty() at Microsoft.AspNetCore.Components.Infrastructure.ComponentStatePersistenceManager.<TryPauseAsync>g__TryExecuteCallback|21_0(Func1 callback, ILogger1 logger)

To Reproduce

1. Create a component with [PersistentState] property (Counter component).
2. Render multiple instances of this component on the same page (on Home page place Counter component twice).
3. Start web app.
4. Observe the exception.

Expected behavior
Each component instance should be able to persist its state independently, without key collisions. Alternatively, documentation should clarify how to generate unique keys per instance.

Sample code
Counter.razor

<PageTitle>Counter</PageTitle>
@rendermode InteractiveServer

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    [PersistentState] public int? currentCount { get; set; }

    protected override void OnInitialized()
    {
        if (currentCount == null)
        {
            currentCount = 0;
        }
    }
    private void IncrementCount()
    {
        currentCount = 10;
    }
}

Home.Razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.
<Counter/>
<Counter />

Blazor Server (Interective with prerendering)

.NET version: 10.0

Browser: Edge

OS: Windows 11 Pro

Additional notes
From the documentation it appears that [PersistentState] works by serializing the property and then deserializing it later to restore the state. This mechanism works fine when there is only a single instance of the component. However, when multiple instances of the same component exist on the page, they all attempt to persist properties under identical names. As a result, the persistence manager encounters duplicate keys and throws an ArgumentException.

This raises an open question: in scenarios where multiple component instances share the same persisted property names, what is the recommended approach?

[mvoxland]

Putting a @key="something" on each of them fixes it just like it would if you were making them in a loop like a foreach or something. There it makes sense why you would need a key though. If it's possible, it would definitely be nice to not have to remember to use keys outside of loops, but like you said at the very least it should be clearer in the documentation.

[mikermnv]

Thanks for the clarification — adding a unique @key to each component instance fixed the problem.
With distinct keys, the Persistent state now behaves correctly.

Example:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter @key='"test1"' />
<Counter @key='"test2"' />

[dotnet-policy-service]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.