Prevent Re-rendering of all the controls on a form when one changes

Radzen.Blazor Components
1

How can I prevent all of the controls/components (like RadzenTexbox) from re-rendering each time that I tab to the next control after changing thevalue in a RadzenTemplateForm which is dynamically built?

I know that this is how Blazor works by nature but I am trying to figure out a workaround for a more efficient re-rendering.

I have 20+ controls on a RadzenTemplateForm, so every time that I tab to the next field after changing a field value, there is a huge amount of lag (even with a powerful machine) as all of the controls are re-rendered again.

<RadzenTemplateForm TItem="Dictionary<string, object>" EditContext="@editContext" Submit="OnSubmit" InvalidSubmit=@OnInvalidSubmit>

<RadzenStack Gap="1rem">
    @foreach(var field in i.Fields.OrderBy(f => f.f_ord))
    {
        <RadzenRow>
            <RadzenColumn Size="12" SizeMD="4" Class="right-align-md-up">
                <RadzenLabel Text="@field.name" Component="@($"{field.fieldKey}")" Class="label-display"/>
            </RadzenColumn>
            <RadzenColumn Size="12" SizeMD="8">
                    @RenderField(field)
            </RadzenColumn>
        </RadzenRow>
    }
</RadzenStack>

I've tried to override the ValueChanged so that it doesn't change state but that doesn't work:

builder.AddAttribute(2, "ValueChanged", EventCallback.Factory.Create(this, (T newValue) => HandleFieldChange(fieldKey, newValue)));

 private void HandleFieldChange(string fieldKey, object newValue)
 {        
     if (!formData.ContainsKey(fieldKey))
     {
         formData.Add(fieldKey, newValue);
     }        
     if(formData.ContainsKey(fieldKey) && !Equals(formData[fieldKey], newValue))
     {
         formData[fieldKey] = newValue;
         //StateHasChanged(); // Call only if necessary
     }
 }
2

Also, I've tried putting the @key on the RadzenRow and on the RadzenTextbox, but still re-renders all of the components on the form.

<RadzenRow @key="@field.fieldKey">
3

EventCallback invokes StateHasChanged() internally and you cannot prevent it.

4

I understand, but the issue is the bubbling up so that it re-renders/re-creates all of the components on the form when one of them has their value updated (in my formData model for this Form).

How could I stop it from cascading/bubbling up to the rest of the controls on the form?

I am needing to do this because there is a huge lag when you hit tab to go the next field while all of the form controls (20+) re-render.

I came up with this workaround to create a wrapper for the RadzenTextbox, which works and fixes the lag issue, but there has to be a more elegant approach:

@using Radzen.Blazor
@inject IJSRuntime JSRuntime

<CascadingValue Value="this" IsFixed="true">
    <RadzenTextBox @bind-Value="@Value" @attributes="AdditionalAttributes" />
</CascadingValue>

@code {
    /// <summary>
    /// Created a wrapper to test the re-rendering issue
    /// </summary>

    [Parameter] public string Value { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object> AdditionalAttributes { get; set; }
    [Parameter] public EventCallback<string> ValueChanged { get; set; }

    private bool _isFirstRender = true;

    
    protected override bool ShouldRender()
    {
        JSRuntime.InvokeVoidAsync("console.log", "MyTextBox - ShouldRender()");

        if(_isFirstRender)
        {
            _isFirstRender = false;
            return true;
        }

        // Your custom logic to determine if re-rendering is necessary
        // Return true to re-render, false to not re-render
        return CheckIfRenderIsRequired();
    }

    private bool CheckIfRenderIsRequired()
    {
        // Implement your logic to determine whether the component should re-render.
        // Example:
        // return someConditionThatDeterminesRerendering;
        return false; // By default, do not re-render.
    }

    private async Task OnValueChanged(ChangeEventArgs args)
    {
        Value = args.Value.ToString();
        await ValueChanged.InvokeAsync(Value);
    }
}

Thank you so much for your time Vlad!