13
- June
2020
Posted By : Rahul
Blazor Components Lifecycle Methods – ASP.NET CORE

Introduction

A component in Blazor has some synchronous and asynchronous lifecycle methods that are helpful to perform additional operations on component during component initialization and rendering.

This is 2nd part of my previous article ✍️ – A deep dive on Blazor Components – ASP.NET Core. If you have not read part-1, please check it here.

When you create a component in Blazor, it inherits from ComponentBase class that implements IComponent interface.

component-implements-componentbase

There are two reasons to inherit ComponentBase class while creating components –

  • First, since ComponentBase implemented IComponent interface and Blazor framework uses this interface to find components throughout the project.
  • Second, ComponentBase provides those important lifecycle methods. You can override them to perform additional operations on components during component initialization and rendering.

Let’s see the methods one-by-one with example –

SetParametersAsync

This is first lifecycle method which executes immediate after the component is created. This sets parameters supplied by its parent component in the render tree. Check out this nice article on RenderTree in case you are not aware.

component-lifecycle-SetParametersasync

When to use

Override this lifecycle method when you need to perform some operation based on parameters passed into component, because a collection of parameters passed by parent component is received here through ParameterView class, before those are assigned to any parameter (decorated with [Parameter] attribute) of current component. If you’re not aware with [Parameter] attribute, we will discuss it in detail later.

OnInitialized & OnInitializedAsync

These methods are executed once parameters provided by parent components are assigned to the parameters defined in current component decorated with [Parameter] attribute. OnInitialized method is called first and then OnInitializedAsync method is called. Both methods execute only once in the component lifecycle.

When to Use

Any asynchronous operation like get data from API etc. which requires the component to re-render the component once they complete, should be placed in the OnInitializedAsync method.

oninitialized-lifecycle-method

Use OnInitialized method only for synchronous operations like reading configuration data etc.

OnParametersSet & OnParametersSetAsync

These two lifecycle methods are first executed when component initialized and receives parameters from parent component and then are executed every time when any of those parameters are updated from its parent component in the render tree.

When to use

Use them when you need to get the values of parameters updated from its parent and based on those parameters, want to update the child component and its state.

onparameterset-lifecycle-method

Let’s run the application and see how OnParametersSet method calls each time –

onparameterset-lifecycle-output

OnAfterRender & OnAfterRenderAsync

These two methods are executed when a component has finished rendering and each time when Blazor re-renders the components. Blazor can be re-rendered components due to one of the following cases –

  • When properties decorated by [Parameter] attribute being changed from its parent component.
  • When any user interacts with the component like button clicks or any other event is triggered by user.
  • And the last but not the least, component itself executes its StatusHasChanged() method to trigger the re-rendering.

When these are called, you can expect that all HTML elements and component references are populated. Especially when you are using Blazor server model, this is the place where you can do any JSInterop call.

These methods take a single parameter called firstRender. It is true only when first time these methods are called on the current component. After that every time when those are executed on re-rendering, firstRender parameter value will be false.

When to use

When you need to initialize any JavaScript library that requires DOM elements ready to work on. Since these methods have single parameter firstRender, so this is good place to initialize any library.

Running application

In my demo example, I have implemented all synchronous & asynchronous lifecycle methods to show you the sequence of execution of these methods. Methods have implemented on DisplayCounterValue component which is a child component and its parent component is Counter component. See the output when Counter component is loaded first and then see the output again when Counter button is clicked and updated counter value is passed to its child component.

Let’s run our application now.

onafterrender-lifecycle-output

ShouldRender()

However this method is not part of component lifecycle methods, but still it is very important to understand. This method is useful when you want to change the state of your page/component. Means, It returns a Boolean value to indicate whether UI can be re-rendered or not. I am saying here “re-render” because even it is returned as false, UI still will be render at least once. So If it is returned as “False”, UI will not be re-render.

Running application

In the demo app, I implemented ShouldRender() method inside same DisplayCounterValue razor component and returned “false” from it. That means this component UI will not re-render now even clicking on “Click Me” button from parent method (as it was working in above shown image). Current Counter value in DisplayCounterValue will not be updated now.

Let run the application and understand.

shouldrender-blazor

StateHasChanged()

This method is also not part of component lifecycle methods like ShouldRender() method. This method notifies Blazor about the component state has been changed and re-render the UI. By default, it calls automatically after any lifecycle method is called, but it can be invoked explicitly when UI needs to refresh explicitly.

This is useful when you need to refresh the UI in case it is not refreshed after a certain operation (like after adding new record, displayed list should be updated).

👉 Remember, StateHasChanged() method looks at the value returned from ShouldRender() method to decide if UI re-render should be happen or not, whether it is called by default with lifecycle methods or called explicitly.

Summary

In this article, we have covered –

👉 What are Component Lifecycle methods in Blazor?
👉 Why component needs to inherit ComponentBase class?
👉 Additional important methods like ShouldRender() & StatusHasChanged().

In our next article, we will cover data binding in Blazor in detail.

Thank you 🙏 for reading this article. Keep Reading, Keep Growing, Keep Sharing 😃


If you found this article helpful,

BMC logoBuy me a coffee


Follow Us For Latest Posts –

Leave a Reply