Blazor Life Cycle Events - Oversimplified

@page "/parent"
<Child></Child>
@code
{

}

<h4>Following are the life cycle events called as per the order of execution.</h4>
<br />
@foreach (string item in Events)
{
    <h6>@item</h6>
    <br />
}

@code 
{
    List<string> Events = new();
    protected override void OnInitialized()
    {
        Events.Add("1. OnInitialized");
    }

    protected override async Task OnInitializedAsync()
    {
        Events.Add("2. OnInitializedAsync");
        await Task.Delay(2000);
    }
}

@page "/parent"
<h4> Parent: </h4>
<button onclick="@IncreaseCounter"> Update Counter</button>
<hr>
<Child Counter="@Counter"></Child>
@code
{
    public int Counter { get; set; }
    private void IncreaseCounter()
    {
        Counter++;
    }
}

<h5> Child: </h5>
<h6>Counter : @Counter</h6>
<h5>Life cycle events as per the order of execution.</h5>
<br />
@foreach (string item in Events)
{
    <h6>@item</h6>
    <br />
}
@code 
{
    [Parameter]
    public int Counter { get; set; }

    List<string> Events = new();

    protected override void OnInitialized()
    {
        Events.Add("1. OnInitialized");
    }
    protected override async Task OnInitializedAsync()
    {
        Events.Add("2. OnInitializedAsync");
        await Task.Delay(2000);
    }
    protected override void OnParametersSet()
    {
        Events.Add("3. OnParametersSet");
    }
    protected override async Task OnParametersSetAsync()
    {
        Events.Add("4. OnParametersSetAsync");
        await Task.Delay(2000);
    }
}

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            Console.WriteLine("OnAfterRender: first render");
        }
        else
        {
            Console.WriteLine("OnAfterRender: after first render");
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {      
        if (firstRender)
        {
            Console.WriteLine("OnAfterRenderAsync: first render");
        }
        else
        {
            Console.WriteLine("OnAfterRenderAsync: after first render");
        }
        await Task.Delay(1000);
    }

In the following couple of images let me show you the execution flow of these 2 methods. Image 7 shows the flow when the component is rendered for the first time it calls both methodsOnAfterRender() and OnAfterRenderAsync() twice.

For the first time, the boolean value of firstRender is true and then these methods get called again and this time value of firstRender is false.

Image 7. Component rendered for the first time.

What happens if the child component receives a new update from the parent and renders itself again? The same pattern from Image 7 is followed exceptOnInitialized() and OnInitializedAsync() methods.

Image 8. The component is rendered with new values.

Now let's dig deep to understand when we need these methods.

To answer this question. I have to make a few changes to our code. I am going to move the "counter-button" to the child component with its OnclickHandler(), then override OnAfterRender(). Also, I am logging the "value of the counter" to the console tab to cross-verify the current value of the "counter". Here's how the child component would look after these changes.

<h5> Child, Counter: @Counter</h5>
<button onclick="@IncreaseCounter"> Update Counter</button>
<br />

@code 
{
    public int Counter { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        Counter++;
        Console.WriteLine("OnAfterRender: Current Value of counter: " + Counter);
    }

    private void IncreaseCounter()
    {
        Counter++;
        Console.WriteLine("IncreaseCounter: Current Value of counter: " + Counter);
    } 
}

Listing 6. Child.razor

Let's have a look at the parent component after some code cleanup.

@page "/parent"

<h4> Parent: </h4>

<hr>

<Child></Child>
@code
{

}

Listing 7. Parent.razor

Run the app and you'll OnAfterRender works.

In the following figure, I am running the application for the first time and as you can see in the Console tab, the value of the counter has been increased by the "OnAfterRender() method", but the UI is not showing the updated value. To put it in simple words, OnAfterRender() executes code after the UI has been rendered.

Image 9. Value in the console is updated where value on UI is not.

Now what would happen if I clicked on the button? It will render the component again.

First, IncreaseCounter() is called which increases the value of the counter to 2 =>then UI is rendered with value 2=>then OnAfterRender is being called but UI is not rendered again.

Image 10. The OnAfterRender() method increases the value but UI ignores that update.

Just to follow through, I am clicking on the button one more time.

Image 11. The OnAfterRender() method increases the value but UI is ignoring that update.

4. StateHasChanged

This life cycle method notifies the UI about the new value and this triggers the re-rendering of the component.

• Use: If you are calling async services and want the UI to be rendered again based on new values, you can use this method. Simply put it notifies the component that State has changed so load the component again with a new value.

Let's first learn why we need StateHasChanged().

To demonstrate this, We need something that gets triggered by itself, for that we can simply use a timer. We will run the timer till the value of the counter reaches 5 and with each second we will increase the value of the counter by 1.

Scenario1.When we don't useStateHasChanged()

• Observe how UI threads stay unresponsive to any changes made to counter variables by timer.

Note. Make the following changes in the child component.

<h5> Child, Counter: @Counter</h5>
<button @onclick="StartTimer"> Start Timer </button>
<br />

@code 
{
    public int Counter { get; set; }

    private void StartTimer()
    {
        Timer timer = new Timer(TimeCallBack, null, 1000, 1000);
    }

    private void TimeCallBack(object state){
        if(Counter < 5)
        {   
            Counter++;        
            Console.WriteLine("Counter " + Counter);      
        }
    }
}

Listing 8. Child.razor.

Let's fire the application and observe the value of the "counter" in the console vs. the value of the "counter" on UI. UI is not re-rendering.

Gif 1: UI is independent of StateHasChanged.

Scenario 2. When we useStateHasChanged().

Now just call StateHasChanged() in TimeCallBack(). Refer to line number 6 from the following snippet.

private void TimeCallBack(object state){
    if(Counter < 5)
    {           
        Counter++;
        Console.WriteLine("Counter " + Counter);
        StateHasChanged();
    }
}

Listing 8. Child.razor.

Now see the difference!!! UI is re-rendering and showing the counter's increment.

Gif 2. UI is re-rendering because of StateHasChanged.

5. ShouldRender

If it returns true it will forcefully refresh the UI, else the updated state of the object will stay in memory but the UI thread will have no idea what the new value is.

Scenario1. When we return false from ShouldRender().

Let's use the same example, now this time just override ShouldRender() in the child component as follows but I will return false from the method.

<h5> Child, Counter: @Counter</h5>
<button @onclick="StartTimer"> Start Timer </button>
<br />

@code 
{
    public int Counter { get; set; }

    private void StartTimer()
    {
        Timer timer = new Timer(TimeCallBack, null, 1000, 1000);
    }

    private void TimeCallBack(object state){
        if(Counter < 5)
        {           
            Counter++;
            Console.WriteLine("Counter " + Counter);
            StateHasChanged();
        }
    }

    protected override bool ShouldRender()
    {
        Console.WriteLine("ShouldRender called: returning false." );
        return false;
    }
}

Listing 9. Child.razor.

If I run this app then, the ShouldRender method will get called but it will block UI from being rendered because we are returning false from the method. Observe how values in the console are changing but the UI is unaffected by those changes.

Gif 3. ShouldRender returning false.

Scenario 2. When we return true from ShouldRender().

protected override bool ShouldRender()
{
    Console.WriteLine("ShouldRender called: returning true." );
    return true;
}

Listing 10. Child.razor.

The same execution flow will follow but this time UI will render updated values.

Gif 4. ShouldRender returning true.

Conclusion

Alright, This was a long article. But I am sure it was helpful. Now we know what different life cycle methods are there in Blazor. How they define the state of the component. Once you start designing components you'll get a clearer understanding of which lifecycle method to use and when.