Blazor Child Component Rendering and Parameter Changes

You can implement your own state logic with a private int.
A lot cheaper than calling an API again.

<div>@infoAboutFavoriteNumber</div> @code { [Parameter] public int FavoriteNumber { get; set; } [Parameter] public Book FavoriteBook { get; set; } private string infoAboutFavoriteNumber = ""; private int currentNumber = -1; // some invalid value protected override async Task OnParametersSetAsync() { if (currentNumber != FavoriteNumber) { currentNumber = FavoriteNumber; infoAboutFavoriteNumber = await ApiService.GetAsync<string>(id: FavoriteNumber.ToString()); } } } 

I don't think that this is necessarily a poor practice to put this logic into the OnParametersSetAsync() method. But there is a way to prevent it from making so many API calls. I would create a private variable that stores the value of the public parameter and then every time the OnParametersSetAsync() method is called you compare the two variables and if they are the same, then you don't make the API call, if they are different, then you make the API call, and after it finishes, you assign the private variable to the public parameter's value. To account for the very first time the component calls the method I would probably assign the private variable to default to a -1, as typically ID values aren't negative. But basically I would assign it to a value that would never be equal to any value passed as the parameter. Otherwise the first time it is called your API might not actually get called. Here is an example:

<div>@infoAboutFavoriteNumber</div> @code { [Parameter] public int FavoriteNumber { get; set; } private int CurrentFavoriteNumber { get; set; } = -1; [Parameter] public Book FavoriteBook { get; set; } private string infoAboutFavoriteNumber = ""; protected override async Task OnParametersSetAsync() { if (FavoriteNumber != CurrentFavoriteNumber) { infoAboutFavoriteNumber = await ApiService.GetAsync<string>(id: FavoriteNumber.ToString()); CurrentFavoriteNumber = FavoriteNumber; } } } 

You can introduce local field and compare its value like other suggests or catch the old value before it changes in SetParametersAsync and it will work in basic scenarios.

However, what if:

• the parameter changes too quickly? You will get concurrent requests and the response can come in wrong order.
• you leave the page and the response come later?
• you want to delay or throttle the parameter changes, e.g. when the parameter is bound to user input.

Reactive Extensions (IObservable) is designed to deal exactly with such scenarios. In Angular (very simmilar to Blazor), the RxJS is first class citizen.

In Blazor, just turn the parameter into IObservable, use RX Operators to deal with it without introducing your own local variables.

readonly Subject<Unit> _parametersSet = new (); protected override Task OnParametersSetAsync() { _parametersSet.OnNext(Unit.Default); //turn OnParametersSetAsync into Observable stream return base.OnParametersSetAsync(); } [Parameter] public int FavoriteNumber { get; set; } protected override void OnInitialized() { _parametersSet.Select(_ => FavoriteNumber) //turn parameter into Observable .DistinctUntilChanged() //detect changes .Select(value => Observable.FromAsync(cancellationToken => { Console.WriteLine($"FavoriteNumber has changed: {value}"); infoAboutFavoriteNumber = await ApiService.GetAsync(value, cancellationToken); }) .Switch() //take care of concurrency .Subscribe(); } 

The nice thing about it, that you can create a reusable class or helper method with all the boilerplate. You just specify a parameter and the async method, e.g:

Loader.Create(ObserveParameter(() => FavoriteNumber), LoadAsync); 

for more reading, check:

• this article: https://blog.vyvojari.dev/blazor-take-advantage-of-system-reactive-aka-observables-part-2/

• live demo: https://blazorrepl.telerik.com/QQullYbo21fLFclq27

• this question: How to add "reload" and IsLoading status to 2nd level Observable

You're facing a common problem: doing data and data access activity in the UI. Things tend to get messy! In this answer I've separated the data from the components. The data and data access reside in a Dependancy Injection service.

I've also done away with EditForm as you aren't actually using it, and changed the Select to a simple select so we can capture updates, update the model and trigger the data retrieval in the service. This also means that the component gets re-rendered after the model has updated. The Blazor UI event handler for the OnChanged event calls StateHasChanged after calling NumberChanged.

First a class for our Favourites data.

public class MyFavourites { public int FavouriteNumber { get; set; } public string FavouriteNumberInfo { get; set; } = string.Empty; } 

Second a DI service to hold our Favourites data and datastore operations.

namespace Server; public class MyFavouritesViewService { public MyFavourites Favourites { get; private set; } = new MyFavourites(); public async Task GetFavourites() { // Emulate a database get await Task.Delay(100); Favourites = new MyFavourites { FavouriteNumber = 2, FavouriteNumberInfo = "The number is 2" }; } public async Task SaveFavourites() { // Emulate a database save await Task.Delay(100); // Save code here } public async Task GetNewNumberInfo(int number) { if (number != Favourites.FavouriteNumber) { // Emulate a database get await Task.Delay(100); Favourites.FavouriteNumberInfo = $"The number is {number}"; Favourites.FavouriteNumber = number; } } } 

Next register the Service in Program:

builder.Services.AddScoped<MyFavouritesViewService>(); 

The component:

<h3>MyFavouriteNumber is @this.Favourites.FavouriteNumber</h3> <h3>MyFavouriteNumber info is @this.Favourites.FavouriteNumberInfo</h3> @code { [Parameter][EditorRequired] public MyFavourites Favourites { get; set; } = new MyFavourites(); } 

And finally the page. Note I'm using OwningComponentBase to tie the scope of MyFavouritesViewService to the component lifecycle.

@page "/favourites" @page "/" @inherits OwningComponentBase<MyFavouritesViewService> @namespace Server <h3>Favourite Number</h3> <div class="p-5"> <select class="form-select" @onchange="NumberChanged"> @foreach (var option in options) { if (option.Key == this.Service.Favourites.FavouriteNumber) { <option selected value="@option.Key">@option.Value</option> } else { <option value="@option.Key">@option.Value</option> } } </select> <div> <button class="btn btn-success" @onclick="SaveFavourites">Save</button> </div> </div> <MyFavouriteNumber Favourites=this.Service.Favourites /> @code { private Dictionary<int, string> options = new Dictionary<int, string> { {0, "Zero"}, {1, "One"}, {2, "Two"}, {3, "Three"}, }; // Use OnInitializedAsync to get the original values from the data store protected async override Task OnInitializedAsync() => await this.Service.GetFavourites(); // Demo to show saving private async Task SaveFavourites() => await this.Service.SaveFavourites(); // Async setup ensures GetNewNumberInfo runs to completion // before StatehasChanged is called by the Handler // Renderer the checks what's changed and calls SetParamaterAsync // on MyFavouriteNumber because FavouriteNumber has changed private async Task NumberChanged(ChangeEventArgs e) { if (int.TryParse(e.Value?.ToString(), out int value)) await this.Service.GetNewNumberInfo(value); } }