Life Cycle Methods Of Component In Blazor

Introduction

The component in Blazor derived from BlazorComponent class. The BlazorComponent class contains some specific life cycle method. The current version of Blazor (0.3.0) has some limited life cycle methods.

Please remember that Blazor is an experimental project and not yet in production. This article is only valid for Blazor 0.3.0.

OnInit() & OnInitAsync()

These methods are called when the component has been initialized. This method triggered when the component has received its initial parameters from parent. The OnInit method calls first and then executes OnInitAsync method. Any asynchronous operations, that require the component to re-render on initialization, should be written in OnInitAsync method.

OnInit

@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<button class="btn btn-primary" onclick="@ButtonClick">Click me</button>
@functions {
protected override void OnInit()
{
Console.WriteLine("OnInit");
}
}

OnInitAsync

@page "/async"
<h1>Hello, world!</h1>
Welcome to your new app.
<button class="btn btn-primary" onclick="@ButtonClick">Click me</button>
@functions {
protected override async Task OnInitAsync()
{
Console.WriteLine("OnInitAsync ");
}
}

OnParametersSet() & OnParametersSetAsync()

These methods are called after the initialization of component. These methods are called each time when new or updated parameters are received from the parent in the render tree. The properties related to parameter are set before this method is called.

protected override void OnParametersSet()
{
}

protected override async Task OnParametersSetAsync()
{
}

OnAfterRender & OnAfterRenderAsync

These methods are called after the rendering of component. When these methods are callled, all the elements and child comopents are populated. These methods can be used to bind event listener that requires the elements to be rendered in the DOM. They can also be used to initialize the Javascript library.

protected override void OnAfterRender()
{
}

protected override async Task OnAfterRenderAsync()
{
}

SetParameters

This method is triggered before the parameters are set. This method can be used to modify the parameter before rendering the component. If we overide this method, we need to call base.SetParameters method otherwise incoming parameter cannot be assigned to the properties on the class, hence UI cannot be rendered.

public override void SetParameters(ParameterCollection parameters)
{
....
base.SetParameters(parameters);
}

Apart from these life cycle methods, Blazor has other two methods: ShouldRender and StateHasChanged. These methods are not part of the life cycle but they are used in the life cycle process.

ShouldRender

This method returns boolean and based on the return of this method UI can be re-rendered. It will be called after the component initialization so the component is always initially rendered.

protected override bool ShouldRender()
{
Console.WriteLine("ShouldRender");
var renderUI = true;
return renderUI;
}

StateHasChanged

This method is used to notify the component that its state has changed. This method is called after any life cycle method. It can also be invoked manually to re-render the UI. This method cannot be overridden.

Summary

In this article, we learned about life cycle method for Blazor component. Blazor is an experimental project and not yet in production. This article is only valid in Blazor 0.3.0.

You can view or download the source code from the GitHub link here.