OnInitializedAsync vs OnParametersSetAsync

Question

I understand the difference between them.

OnInitializedAsync fires once when the component is Initialized where as OnParametersSetAsync fires each time the components parameter is set/changed.

does it mean that in the .razor page we can omit OnInitializedAsync function and do all the coding in this OnParametersSetAsync() function?

does it mean OnInitializedAsync() is redundant?

Answer 1

Let's say you have a component that makes a call to an API to retrieve some data. It also accepts a parameter called SortDirection and you want to sort the data ascending or descending according to its value. The API call should only happen one time, once you have the data in memory you don't need to call the backend anymore. On the other hand let's say the user has a toggle button that changes the sort direction so the SortDirection parameter can change multiple times during the component lifecycle. You want to retrieve the data inside OnInitializedAsync() but you should apply the sorting inside OnParametersSetAsync(). Example:

@if (_sortedData != null)
{
    foreach (var item in _sortedData)
    {
        <p>@item</p>
    }
}

@code {
    private List<string>? _data;
    private List<string>? _sortedData;
    private string? _sortDirection;

    [Parameter]
    public string? SortDirection { get; set; }

    protected override async Task OnInitializedAsync()
    {
        _data = await MyService.LoadData();        
    }

    protected override void OnParametersSet()
    {
        if (_sortDirection != SortDirection)
        {
            _sortDirection = SortDirection;

            if (_sortDirection == "asc")
            {
                _sortedData = _data?.OrderBy(x => x).ToList();
            }
            else if (_sortDirection == "desc")
            {
                _sortedData = _data?.OrderByDescending(x => x).ToList();
            }
            else
            {
                _sortedData = _data;
            }
        }
    }
}

Answer 2

ComponentBase is just a tool. It's one implementation of IComponent. 99.9% of the world uses it, but it's not compulsory.

You're using a one size fits all swiss army knife component implementation for all your diverse component needs. There will be redundancy, normally lots of it! ComponentBase is your toolbox, not one of the tools in the box.

ONinitialized{Async}/OnParametersSet{Async} may be a bit of overkill for many implementations, but so is a lot of the code in ComponentBase.

This bit of code gets run on every render, yet 99.x% of the time does absolutely nothing but waste CPU cycles!

    Task IHandleAfterRender.OnAfterRenderAsync()
    {
        var firstRender = !_hasCalledOnAfterRender;
        _hasCalledOnAfterRender |= true;

        OnAfterRender(firstRender);

        return OnAfterRenderAsync(firstRender);
 }

You can see the full implmentation here - https://github.com/dotnet/aspnetcore/blob/main/src/Components/Components/src/ComponentBase.cs

Also see one of my answers to this question that demonstrates a different more minimalist base component - In Blazor, is there any way to get render time for any component without its children?