3

If a component has a child component that takes a reference type Foo as a parameter, then any HTML event completion will cause the child to rerender: in the below Index.razor, clicking the button will cause the BarPanel to re-render.

<BarPanel InputFoo="Foo1" />
<button @onclick="()=>{}" />

Now if BarPanel is onerous to render and/or present many times, I might choose to override its ShouldRender to reduce this re-render frequency.

But suppose further BarPanel has a child QuxPanel, and it also takes an InputFoo--in BarPanel.razor:

<span>@InputFoo.Bar</span> 
<QuxPanel InputFoo="InputFoo" />
@code { 
   [Parameter] Foo InputFoo {get;set;}
   protected override bool ShouldRender() {
      ...
   }
}

And of course in QuxPanel.razor:

<span>@InputFoo.Qux</span>
@code { 
   [Parameter] Foo InputFoo {get;set;}
}

So on a UI event completion in Index, I'd like to permit a re-render of QuxPanel nested inside BarPanel, but it seems that I can't unless BarPanel knows about it and re-renders first. But BarPanel is the expensive component, and I'd like to rerender its children while preventing it from re-rendering (for example, when Qux changes but Bar remains unchanged). Is there any way to disallow a component from rendering using ShouldRender, yet allow its children to rerender as they see fit?

2
  • 1
    Hi. there are several answers to your question, but before putting pen to paper, I'd like to understand what you mean by onerous/expensive to render. Lots of html to build out and display, lots of number crunching, lots of data access??? Aug 6, 2021 at 22:57
  • Mostly the former: "Lots of HTML" with not a lot of change. One example is when I'm rendering rows of a table and each cell is rendered by a component. When one cell out of a row changes, It would be nice if the Row component could return ShouldRender false but still let one component in the row have ShouldRender true and let it alone re-render while the other few hundred cells and dozen rows on the screen don't re-render. Aug 6, 2021 at 23:00

1 Answer 1

1

In general you shouldn't worry. The Renderer diffing engine works out what has changed in the DOM and only dispatches the changes to the browser. You should have a very good understanding of the whole rendering process before selectively rendering components.

However, if you want to go down that route, you need to drive rendering through events. Here's some demo code that also monitors SetParameter and Render events in components.

BaseService

A very basic notification Service. Make sure you register it as a Scoped Service.

    public class BaseService
    {
        public void NotifyComponentANeedstoRender()
            => ReRenderComponentA?.Invoke(this, EventArgs.Empty);

        public event EventHandler ReRenderComponentA;
    }

BaseControl

@implements IDisposable
<div class="border-1 m-1 p-1">
    <div class="bg-dark text-light">
        <span>
            Sets: @_sets
        </span>
        <span>
            Renders: @_renders
        </span>
    </div>
    <div class="p-1">
            @this.ChildContent
    </div>
</div>

@code {

    private int _renders = 1;
    private int _sets = 0;

    [Parameter] public RenderFragment ChildContent { get; set; }

    [Parameter] public bool ShouldNotRender { get; set; }

    [Parameter] public bool EventDriven { get; set; }

    [Inject] BaseService baseService { get; set; }

    protected override void OnInitialized()
    {
        if (EventDriven)
            baseService.ReRenderComponentA += OnRender;
    }

    public override Task SetParametersAsync(ParameterView parameters)
    {
        parameters.SetParameterProperties(this);
        _sets++;
        return base.SetParametersAsync(ParameterView.Empty);
    }

    protected override bool ShouldRender()
    {
        if (this.ShouldNotRender)
            return false;
        _renders++;
        return true;
    }

    private void OnRender(object sender, EventArgs e)
    => InvokeAsync(this.StateHasChanged);


    public void Dispose()
    {
        if (EventDriven)
            baseService.ReRenderComponentA -= OnRender;
    }

}

TestPage

Finally a demo razor page.

@page "/TestRender"
<BaseControl>
    <button class="btn btn-info me-2" @onclick="OnClickAsync">Increment Async</button>
    <button class="btn btn-primary" @onclick="OnClick">Increment</button>
    <BaseControl ShouldNotRender="true">
        <BaseControl>
            <BaseControl>
                Not the correct Clicks after intial render : @_clicks
            </BaseControl>
            <BaseControl EventDriven="true">
                <div>
                    The correct Clicks : @_clicks
                </div>
            </BaseControl>
        </BaseControl>
    </BaseControl>
    <BaseControl>
        <BaseControl>
            <BaseControl>
                The correct Clicks : @_clicks
            </BaseControl>
        </BaseControl>
    </BaseControl>
</BaseControl>

@code {

    [Inject] BaseService baseService { get; set; }

    private string _content => $"<div>{_clicks}</div>";

    private int _clicks;

    private async Task OnClickAsync()
    {
        _clicks++;
        this.baseService.NotifyComponentANeedstoRender();
        await Task.Delay(1);
    }

    private void OnClick()
    {
        _clicks++;
        this.baseService.NotifyComponentANeedstoRender();
    }
}

Updates to the Answer

The only method the Renderer has to communicate with a Component is SetParametersAsync. The Renderer has no method of directly running a re-render. In ComponentBase, SetParametersAsync calls the OnInitialized/OnParametersSet method set and as part of that sequence calls StateHasChanged on one or more occasions.

When a render event occurs in a component, the Renderer needs to decide what's changed, and which child components need to know about the changes. If it decides there's a change in one or more of a component's parameters, it calls SetParametersAsync on that component. It's up to the component to decide if it needs to re-render.

Let's look at a couple of examples:

... component code
<BaseControl>
    Hello World
</BaseControl>
... component event handlers

At first glance you would think that BaseControl shouldn't update when a render event occurs in the parent - there's no parameters to change. However, that isn't actually the case. That "Hello World" gets compiled into a RenderFragment that gets passed to BaseControl as the ChildContent Parameter. The RenderFragment is a delegate that the Renderer knows could have changed (it has no way of knowing if it has or hasn't), so it calls SetParametersAsync on BaseControl.

Example 2 looks like this:

... component code
<BaseControl/>
... component event handlers

Now BaseControl has no ChildContent, so the Renderer knows it's parameters haven't changed - ChildContent is still null - so it doesn't call SetParamatersAsync.

The same situation applies to objects and primitives. The Renderer doesn't know if an object has changed - so it assumes it has - and calls SetParamatersAsync.

Here's a couple of components and an updated test page to demo the differences.

PrimitiveControl

<div class="border-1 m-1 p-1">
    <div class="bg-dark text-light">
        <span>
            Sets: @_sets
        </span>
        <span>
            Renders: @_renders
        </span>
    </div>
    <div class="p-1">
        <div>Value : @Value</div>
    </div>
</div>

@code {
    [Parameter] public int Value { get; set; }

    private int _renders = 1;
    private int _sets = 0;

    public override Task SetParametersAsync(ParameterView parameters)
    {
        parameters.SetParameterProperties(this);
        _sets++;
        return base.SetParametersAsync(ParameterView.Empty);
    }

    protected override bool ShouldRender()
    {
        _renders++;
        return true;
    }
}

ObjectControl

<div class="border-1 m-1 p-1">
    <div class="bg-dark text-light">
        <span>
            Sets: @_sets
        </span>
        <span>
            Renders: @_renders
        </span>
    </div>
    <div class="p-1">
        @foreach (var str in Value)
        {
            <div>@str</div>
        }
    </div>
</div>

@code {

    [Parameter] public List<string> Value { get; set; }

    private int _renders = 1;
    private int _sets = 0;

    public override Task SetParametersAsync(ParameterView parameters)
    {
        parameters.SetParameterProperties(this);
        _sets++;
        return base.SetParametersAsync(ParameterView.Empty);
    }

    protected override bool ShouldRender()
    {
        _renders++;
        return true;
    }
}

Updated Test Page

@page "/TestRender"
<BaseControl>
    <button class="btn btn-info me-2" @onclick="OnClickAsync">Increment Async</button>
    <button class="btn btn-primary" @onclick="OnClick">Increment</button>
    <BaseControl ShouldNotRender="true">
        <BaseControl>
            <BaseControl>
                Not the correct Clicks after intial render : @_clicks
            </BaseControl>
            <BaseControl EventDriven="true">
                <div>
                    The correct Clicks : @_clicks
                </div>
            </BaseControl>
        </BaseControl>
    </BaseControl>
    <BaseControl>
        <BaseControl>
            <BaseControl>
                The correct Clicks : @_clicks
            </BaseControl>
        </BaseControl>
    </BaseControl>
</BaseControl>
<BaseControl>
    Hello World
</BaseControl>
<BaseControl/>
<ObjectControl Value="list" />
<PrimitiveControl Value="intvalue" />

@code {

    [Inject] BaseService baseService { get; set; }

    private string _content => $"<div>{_clicks}</div>";

    private int _clicks;

    private List<string> list = new List<string> { "Lagos", "Houston" };

    private int intvalue = 20;

    private async Task OnClickAsync()
    {
        _clicks++;
        this.baseService.NotifyComponentANeedstoRender();
        await Task.Delay(1);
    }

    private void OnClick()
    {
        _clicks++;
        this.baseService.NotifyComponentANeedstoRender();
    }
}
9
  • You wrote, "In general you shouldn't worry. The Renderer diffing engine works out what has changed in the DOM and only dispatches the changes to the browser." This is not true in my example in the question: When the button is clicked, all components re-render even though nothing has changed. The system does not detect whether the properties inside BarPanel.Foo have not changed. It only knows that they may have changed, so BarPanel will be rerendered. Aug 7, 2021 at 15:48
  • A relevant clue seems to be here (learn.microsoft.com/en-us/aspnet/core/blazor/components/…): "Components inherited from ComponentBase skip rerenders due to parameter updates if...All of the parameter values are of known immutable primitive types, such as int, string, DateTime, and haven't changed since the previous set of parameters were set." My case is regarding a component with a parameter that is an ordinary (non-primitive) reference type. Aug 7, 2021 at 15:51
  • Do I understand it right that your solution totally overrides the default rendering trigger for components that inject a BaseService? Aug 7, 2021 at 15:56
  • @PatrickSzalapski. The Render Event doesn't mean the browser DOM gets rendered. If I render a component in which there are no changes, nothing happens in the browser DOM. The Blazor Renderer runs the queued RenderFragement, builds a Virtual DOM from the RenderTree, compares the new DOM with the old and sends the changes to the browser window. IN WASM this happens in the Browser WebAssembly compartment, in Server in the SignalR session. Aug 7, 2021 at 16:01
  • 1
    See my added comments on why child components get rendered. And does my solution override the default triggers. No, returning False to ShouldRender stops StateHasChanged placing the current RenderFragement onto the Renderer Queue. So the component doesn't render, and the Renderer isn't triggered to check for Parameter updates on Child Components. My event just triggers the StateHasChanged. It doesn't pass new Parameters into the component. If the parameters are objects, no problem, but if they are primitives, the component will render using the old values. Aug 7, 2021 at 17:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.