Blazor in depth — Create Blazor component without Lifecycle methods

It has been long time since I have managed to write a blog post. As I got up with a very challenging Blazor project in workplace, I got no time to share my thought with the community. Glad to be back!!.

In this blog post, I am going to share how I created a Blazor component without life-cycle methods and razor file syntax. We could also say this as class only component approach but without life-cycle methods. Many of them might knew this way of component rendering, but I felt like sharing this would help other folks who doesn’t know. I found this approach after going through various components used in Blazor source code.

To demonstrate this approach, we are going to create a simple Rating component.

I am creating a class named Rating.cs. As mentioned previously this is a class only component so I am not creating Razor component item.

public class Rating
{
}

First step in this approach is to implement Rating class with IComponent interface.

public class Rating : IComponent
{
}

Now the Rating class must implement below two methods of IComponent interface.

• Attach — Attach the RenderHandle instance to the rating component.
• SetParametersAsync — Set the component parameters. Yes I lied before, we need this life cycle method. But I promise, this is the only one needed I will not add no more.

In the Attach method, we need to get and store the RenderHandle instance for later usage. Now the code will look like below.

public class Rating : IComponent
{
     private RenderHandle _renderHandle;
     void IComponent.Attach(RenderHandle renderHandle)
     {
        _renderHandle = renderHandle;
     }
}

Now we need to handle the SetParametersAsync method, this method should take care of below two important responsibilities.

• Get component parameters from ParameterView and set in the corresponding component property. Here Rating component uses Value property.
• Invoke Render method of the RenderHandle with the RenderFragment delegate.

Now the final rating component will look like below.

    public class Rating : IComponent
    {
        private RenderHandle _renderHandle;
        [Parameter]
        public int Value { get; set; }
        void IComponent.Attach(RenderHandle renderHandle)
        {
            _renderHandle = renderHandle;
        }
        Task IComponent.SetParametersAsync(ParameterView parameters)
        {
            foreach(var entry in parameters)
            {
                switch (entry.Name)
                {
                    case nameof(Value):
                        Value = (int)entry.Value;
                        break;
                }
            }
            _renderHandle.Render(RenderDelegate);
            return Task.CompletedTask;
        }
        private void RenderDelegate(RenderTreeBuilder builder)
        {
            int max = Math.Min(Value, 5);
            int seq = 1;
            for (var i = 0; i < max; i++)
            {
                builder.OpenElement(seq++, "span");
                builder.AddAttribute(seq++, 
                          "style", "color:#f49813;font-size:30px");
                builder.AddContent(seq++, "★");
                builder.CloseElement();
            }
        }
    }

Now the Rating component can be used in our application simply like below.

Rating component usage

The output looks like below

Rating component output

Closing

I hope you have learned one of many ways of creating Blazor components. In this post, I am neither recommending this as a best approach nor insisting to use this approach for performance benefits. I found this approach as a simple and clean way of creating simple Blazor components.

Leave comments or share this post if you found this helpful. Happy coding !!