Blazor Lifecycle Methods

Hello everyone, in this article we will talk about the Blazor’s Lifecycle methods and make it clear for beginners. Blazor Lifecycle methods are: OnInitialized(), OnParameterSet(), OnAfterRender() also their asynchronous methods can be used too: OnInitializedAsync(), OnParameterSetAsync(), OnAfterRenderAsync()

OnInitialized:

OnInitialized is the method which makes ready the page when the page is opened. For example if a customer wants to see his basket when he opened the basket page the method will work and get his page. Here when we are finding the user’s basket we can use OnInitialized method to do that operation. Because when this page opened user will wanna see the basket and with OnInitialized method we are making the configuration and writing the code in this scenario we are calling our service to get if he has any basket and basket items in the user’s basket if there is we are taking that data and we are making it to appear on the page or using this data as we need. Thats how we use OnInitialized methods.

As you see in the code we are getting products by category and if there is not any error we are getting the data and make it ready for the user.

OnParameterSet:

Sometimes on our client side we are sending parameters for the app’s functionality like holding the category parameter in URL and with that way we are sending our requests. While we are doing that we may change this parameter like clicking the another category the page will be the same but the products will change by product id. When we are doing that we are getting need of making the Blazor be aware of in case of any Parameter’s change. That’s when we are using OnParameterSet. With this method we are making the app ready for changing any parameter.

Id is coming from the URL as a parameter and if the parameter has changed but the data is still the old one its understanding and refreshing the page to get the correct category’s products. Thats how when the user click another category the App is getting it correctly.

OnAfterRender:

OnAfterRender method is creating with a boolean parameter. Its helping us to make the page responsive. Lets Assume we have a button and when it clicked we will be changing the button’s color from blue to the green. That’s where we can use our OnAfterRender.

@page "/onaftertry"

<h3>DOM Update Example</h3>

<button @onclick="ChangeText">Change Text</button>

<p id="textElement">This is some initial text.</p>

@code {
    private string newText = "This is the updated text.";

    private bool textChanged = false;

    private void ChangeText()
    {
        textChanged = true;
        // When the button is clicked, we set the textChanged flag to true.
        // We will update the text in the DOM after rendering.
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (textChanged)
        {
            // This code will run after the component has been rendered.
            // It changes the text in the DOM element with id "textElement".
            JSRuntime.InvokeVoidAsync("updateText", "textElement", newText);
            textChanged = false; // Reset the flag to avoid unnecessary updates.
        }
    }
}

As you can see in the example when the button clicked OnAfterRender is changing the color. Its helping us to using javascript functions in our Blazor App.

If you are interested with Blazor you can check this organization which I have created for open source Blazor projects, There will be more projects and I believe it can help you a lot to see different projects to understand better how to use Blazor.

I am learning a lot while I am writing I hope you learned a lot too while you are reading and enjoyed it. Don’t forget to follow on Medium to keep going to learn together. See you soon :)