Poor Performance

[Shahid-khan5]

Hi Ado, Thank you for the great library. I was considering your library for my new .NET MAUI project. I created a new project using the template maui-reactor-appshell

I added a simple collectionview that contains 500 simple items and I show it in a label, unfortunately, when I click on the counter button, it takes about 2-3 seconds to update and has very poor performance.

I created another sample project using the default .NET MAUI template and added the collection view and it has blazing performance.

You can checkout the repo.

Could you please let me know how we can make it performant ?

[adospace]

Hi, thanks, the problem is that you are creating a new list every time the component is rendered. Create the list one time and render it in the collection view, you can use the state (or a property). Something like this:

class MainPageState
{
    public int Counter { get; set; }
    public List<int> Items {get; set;}
}

class MainPage : Component<MainPageState>
{
    protected override OnMounted()
    {
        State.Items = Enumerable.Range(0,500).ToList();
    }

    public override VisualNode Render()
    {
        return new ContentPage
        {
            new ScrollView
            {
                new VerticalStackLayout
                {
                    new Image("dotnet_bot.png")
                        .HeightRequest(200)
                        .HCenter()
                        .Set(Microsoft.Maui.Controls.SemanticProperties.DescriptionProperty, "Cute dot net bot waving hi to you!"),
                    new HandyTextBox()
                    .Label("FooBar")
                    ,
                    new Label("Hello, World!")
                        .FontSize(32)
                        .HCenter(),

                    new Label("Welcome to MauiReactor: MAUI with superpowers!")
                        .FontSize(18)
                        .HCenter(),

                    new Button(State.Counter == 0 ? "Click me" : $"Clicked {State.Counter} times!")
                        .OnClicked(()=>SetState(s => s.Counter ++))
                        .HCenter(),
                         new CollectionView()
                        .ItemsSource(State.Items,o=>new Label().Text(o.ToString()))
                        .Background(Microsoft.Maui.Controls.Brush.Red)
                        .HeightRequest(500)
                        .WidthRequest(500)
                }
                .VCenter()
                .Spacing(25)
                .Padding(30, 0)
            }
        }
        .Background(Microsoft.Maui.Controls.Brush.White);
    }
}

[Shahid-khan5]

Thank you so much Ado, Let me try it. I am very excited for it

[Shahid-khan5]

Thanks, It worked