Livscyklus og state

Læringsmål

• Placere datahentning i OnInitializedAsync vs OnParametersSetAsync.
• Forklare forskellen på first render, parameter change og event-driven opdateringer.
• Bruge StateHasChanged bevidst (og undgå unødige kald).
• Kende cascading parameters til tema/API-base der deles i layout.
• Overblik over ShouldRender som performance-værktøj.

Hvornår bruger I livscyklus-metoder? Når data afhænger af route/parametre (LoL /champion/{id}), når parent skifter [Parameter], eller når I skal undgå race conditions ved async API-kald fra OpgaverAPI.

En komponent er ikke «bare HTML» — den har en livscyklus fra første render til destruction. Når parent sender nye parametre (fx valgt champion-id), skal child enten reagere i OnParametersSet eller via bound properties.

Typisk rækkefølge

1. SetParametersAsync — parent sender parametre.
2. OnInitialized / OnInitializedAsync — én gang ved oprettelse (god til første API-kald).
3. OnParametersSet / OnParametersSetAsync — hver gang parametre ændres (god til at re-loade detail når id skifter).
4. Event handlers — bruger klikker «Hent næste side» → opdater state → render.
5. Dispose — ryd timers, unsubscribe.

Regel: Init til data der kun hænger på siden (statisk intro). OnParametersSet til data der følger id/query fra URL. Events til bruger-initieret refresh («Hent igen»).

# Vælg et trin

OnInitializedAsync — første load

@page "/pokemon-lifecycle"
@inject IPokemonService Api

<h1>Starter Pokémon</h1>
<ul>@foreach (var p in mons) { <li>@p.Name</li> }</ul>

@code {
  List<Mon> mons = new();

  protected override async Task OnInitializedAsync()
  {
    mons = await Api.GetStarterAsync();
  }

  record Mon(string Name);
}

Brug async livscyklus-metoder til I/O. Vis loading-state hvis kaldet tager tid — ellers ser brugeren en tom liste.

OnParametersSet — route/query ændres

@* ChampionDetail.razor — [Parameter] public string Id *@
@code {
  Champion? champ;

  protected override async Task OnParametersSetAsync()
  {
    champ = await Lol.GetChampionAsync(Id);
  }
}

Når parent eller router sender nyt Id, kører OnParametersSetAsync igen — uden at komponenten nødvendigvis destrueres.

Hvornår OnParametersSet frem for kun Init? Master/Detail-Pokémon: parent sætter PokemonId ved klik — samme detail-komponent, nyt id. Router med @page "/pokemon/{id:int}" opfører sig tilsvarende.

StateHasChanged og rendering

Efter I opdaterer felter uden for en normal event (fx callback fra timer eller JS interop), kan UI mangle opdatering indtil StateHasChanged() kaldes. I de fleste @onclick / @bind-flows sker det automatisk.

protected override bool ShouldRender()
{
    // Eksempel: skip render hvis kun intern debug-state ændrede sig
    return _visibleChanged;
}

Hvornår ShouldRender? Når en stor LoL-liste re-renderer for ofte (fx parent opdaterer et ur hvert sekund). Returnér false når jeres felter ikke påvirker markup — men brug det målrettet; forkert brug giver «frossen» UI.

EventCallback-timing: Parent opdaterer state i callback → child får nye parametre → OnParametersSet kan køre efter parent’s render. Hvis child også muterer samme state, kan I se et ekstra render-trin — derfor one-way data ned, events op.

Cascading values

Layout kan levere fælles værdier (tema, API-base, bruger-context) uden at prop-drille gennem hver komponent:

@* App.razor / Layout *@
<CascadingValue Value="apiBase" Name="ApiBase">
  @Body
</CascadingValue>

@* Child *@
@code {
  [CascadingParameter(Name = "ApiBase")]
  public string ApiBase { get; set; } = "";
}

Hvornår cascading? Når mange dybe børn skal kende samme Mercantec Auth-kontekst, tema eller read-only config — undgå at prop-drille ApiBase gennem fem niveauer. Alternativ: inject IConfiguration eller dedikeret service.

CancellationToken ved navigation

Hvorfor det betyder noget: Eleven klikker Pikachu, skifter hurtigt til LoL-ruten — langsomt Pokémon-detail returnerer stadig og overskriver ny side. CancellationToken stopper unødigt arbejde og race conditions.

protected override async Task OnParametersSetAsync(CancellationToken cancellationToken)
{
    loading = true;
    try
    {
        detail = await Lol.GetChampionAsync(Id, cancellationToken);
    }
    catch (OperationCanceledException)
    {
        return; // bruger navigerede væk — ikke opdater state
    }
    finally { loading = false; }
}

private int _loadedId = -1;

protected override async Task OnParametersSetAsync(CancellationToken ct)
{
    if (Id == _loadedId) return;
    _loadedId = Id;
    detail = await Lol.GetChampionAsync(Id, ct);
}

Baseret på MAGS Blazor-wiki og Microsoft Learn — Blazor.