FluentUI Tabs constantly reloading

[stasaristic]

I'm creating a Blazor server app (keep in mind it's my first time using it), and I decided to use FluentUI for the frontend.

1. I created a Blazor component which holds a highcharts graph
2. Created a few tabs using FluentTabs
3. In each tab there is an instance of the created graph component

The issue I'm having is whenever I switch between tabs, all the ones that contain the same component (even though it is a different instance), rerender of all the other tabs (charts)... You can imagine how slow it is switching between charts

<FluentTabs>    
    @foreach (var chartId in keys)
    {
        <FluentTab  Label="@chartId">
            <FluentGrid Spacing="2" Justify=JustifyContent.FlexStart Class="mt-2">
                <FluentGridItem xs="12" sm="12" md="12" lg="12">
                    <FluentCard>
                        <div @key="@chartId.ToLower()">
                            <Chart StartDate="@_selectedStartDate" EndDate="@_adjustedEndDate" ChartId="@chartId" @key="chartId"/>
                        </div>
                    </FluentCard>
                </FluentGridItem>
            </FluentGrid>
        </FluentTab>
    }
</FluentTabs>

[vnbaaij]

I don't think this is a library issue but a standard Blazor one. Have you looked at https://learn.microsoft.com/en-us/aspnet/core/blazor/components/element-component-model-relationships?view=aspnetcore-8.0

[stasaristic]

I looked into that as well, I'm starting to think it's a Blazor render issue... Currently experimenting with solutions found on this issue

[stasaristic]

This issue has been resolved by managing the state of component parameters within the OnParametersSetAsync() method. By comparing if the complex-typed parameters have changed when a parent in the component tree was refreshed.
Some documentation that helped:

• ASP.NET Core Blazor performance best practices
• ASP.NET Core Razor component lifecycle