❔ Best way to display a continually updating list of messages

@inject MerpieClient Client
@inject MerpieHubConnection HubConnection
@inject ILogger<MessageList> Logger

<div class="flex flex-col-reverse gap-y-4">
    @foreach (var message in messages)
    {
        <MessageDisplay Message="message"/>
    }
</div>

@code {

    private readonly List<MessageDto> messages = new();

    protected override async Task OnInitializedAsync()
    {
        await HubConnection.StartConnection();

        HubConnection.OnMessageSent += OnMessageSent;
        HubConnection.OnMessageDeleted += OnMessageDeleted;
        HubConnection.OnMessageEdited += OnMessageEdited;
        
        // Fetch messages
        if (await Client.GetMessages() is ApiResult<IEnumerable<MessageDto>>.Success success)
            messages.AddRange(success.Value);
    }

    private void OnMessageSent(MessageDto message)
    {
        Logger.LogInformation("Message with ID {id} received", message.Id);
        
        messages.Insert(0, message);
        StateHasChanged();
    }

    private void OnMessageDeleted(MessageDto message)
    {
        Logger.LogInformation("Message with ID {id} deleted", message.Id);
        
        messages.Remove(message);
        StateHasChanged();
    }

    private void OnMessageEdited(MessageDto oldMessage, MessageDto newMessage)
    {
        Logger.LogInformation("Message with ID {id} edited", oldMessage.Id);

        messages[messages.IndexOf(oldMessage)] = newMessage;
        StateHasChanged();
    }

}

@inject MerpieClient Client
@inject MerpieHubConnection HubConnection
@inject ILogger<MessageList> Logger

<div class="flex flex-col-reverse gap-y-4">
    @foreach (var message in messages)
    {
        <MessageDisplay Message="message"/>
    }
</div>

@code {

    private readonly List<MessageDto> messages = new();

    protected override async Task OnInitializedAsync()
    {
        await HubConnection.StartConnection();

        HubConnection.OnMessageSent += OnMessageSent;
        HubConnection.OnMessageDeleted += OnMessageDeleted;
        HubConnection.OnMessageEdited += OnMessageEdited;
        
        // Fetch messages
        if (await Client.GetMessages() is ApiResult<IEnumerable<MessageDto>>.Success success)
            messages.AddRange(success.Value);
    }

    private void OnMessageSent(MessageDto message)
    {
        Logger.LogInformation("Message with ID {id} received", message.Id);
        
        messages.Insert(0, message);
        StateHasChanged();
    }

    private void OnMessageDeleted(MessageDto message)
    {
        Logger.LogInformation("Message with ID {id} deleted", message.Id);
        
        messages.Remove(message);
        StateHasChanged();
    }

    private void OnMessageEdited(MessageDto oldMessage, MessageDto newMessage)
    {
        Logger.LogInformation("Message with ID {id} edited", oldMessage.Id);

        messages[messages.IndexOf(oldMessage)] = newMessage;
        StateHasChanged();
    }

}