How to tell Blazor to not Rerender childComponent

Question

I have a dynamicly own tabs on c#,Html,css and some Js. Js just toggle style "Display" to block or none. Tabs generate with foreach.

Example:

foreach (item in TabsList){<div@RenderFragment/<div}

Main problem: In my tabs there are some actions and data and I dont want to lose it when I Add or Delete other Tab. If I add new Tab then it will normal render without ReRender old tabs and lose data, but if I Remove from List tab which located to the left of the current selected tab then Blazor will ReRender all my Tabs and I will lose My Data. But if i remove tab to the right of the current selected tab Blazor will not ReRender All my Tabs. Is it Possible tell Blazor just remove item from TabsList and not to Rerender again my component?

Henk Holterman · Accepted Answer · 2022-04-19 13:50:38Z

3

This might be solvable with the @key attribute.
Without a [mre] it's not possible to be sure, you can test it:

 foreach (item in TabsList){ <div @key="item">@RenderFragment</div> }

edited Apr 19, 2022 at 13:50

answered Apr 19, 2022 at 12:39

Henk Holterman

276k33 gold badges353 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Leandro Toloza Over a year ago

Henk, with this solution, it's not "anti-performance"? i think so because you are creating like new child-component foreach item you had, i think that using shouldRender setted to false, you are re-using the same component but only rendering the first time you implement it (could be a missunderstood from my part)

Henk Holterman Over a year ago

I'm not totally sure - if it is about the identities (key) then your solution might end up showing the wrong tabs. But performance should be good here too.

Bennyboy1973 Over a year ago

Can you key an entire object? I would assume you would want to key to something like item.ID.

Henk Holterman Over a year ago

@Bennyboy1973 - Blazor knows how get the Identity it wants/needs. Passing the objkect is the common (and I assume best) practice.

Bennyboy1973 Over a year ago

@HenkHolterman tyvm that's very useful to know

Leandro Toloza · Accepted Answer · 2022-04-19 12:39:41Z

You should set the shouldRender() method to false inside the component (this will prevent the re-render everytime you call the component, only render the first time), anyway, like a year ago, they try to solve this issue in this thread on git where there is a lot of info about the topic!

Collectives™ on Stack Overflow

How to tell Blazor to not Rerender childComponent

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related