BL0005 - external parameter usage - why is a warning for that?

Question

BL0005:Component parameter should not be set outside of its component.

I have a component inside a component. When my outer component state changes, I want to update inner component's state. The outside component is an autocomplete implementation, the state that changes is input text, the inner component is autocomplete items list, its highlighted part to be exact.

So I change the inner component state via its parameter. And I get this warning. Why?

BTW, the code works exactly as I expected it to work. The state is synchronized, my matched text is highlighted in all autocomplete items.

My guess is changing the parameter could cause the component to re-render itself, which is, in my case - completely desired and expected behavior. Why else would I change a parameter of a component at runtime?

I searched for the warning online, but I haven't found anything useful beside that one: https://github.com/aspnet/AspNetCore/issues/12293

Again, it looks like modifying the parameter the way I do in my code is a very bad practice, but again, WHY? Is there a reason I have to do that in less simple and straightforward way, or there is MORE simple and straightforward way of doing this?

Answer 1

Good question!

The Blazor team is pretty straightforward with their guideline to not modify parameters directly:

We want to make it hard or impossible to set a component parameter property directly. This is never correct when done in application code.

Source: https://github.com/aspnet/AspNetCore/issues/8825

However, you have to keep searching to find the reasoning for that. The root lies in the rendering system, mainly in how the rendering systems handles ParameterViews between parent and child components.

Here is a quote from Steve Sanderson about that:

Every time your parent component (Index) re-renders, it's re-rendering its child (Counter) and writing a value to the Content parameter. [...]

The solution is not to mutate your [Parameter] properties directly. Doing so leads to confusion, because they are getting written from two different places which interfere with each other.

Source: https://github.com/aspnet/AspNetCore/issues/14283#issuecomment-534651201

So basically the reason to not modify parameters diretly is to avoid running the risk that the rendering system runs out of sync. This would lead to very subtle errors. Your code is working fine at the moment but there is no guarantee that adding or removing components to your RenderTree will not result in side effects.

Answer 2

Maybe I'm missing something here, but shouldn't people be recommending to use @bind-Value="yourVariable" on the component and then just modify the value of yourVariable in their code?