Blazor in depth — Create Blazor component without Lifecycle methods
Tags: dotnet, blazor, aspnetcore, dotnet5
Published: 2020-10-16 17:20:16

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.

```csharp
public class Rating
{
}
```
First step in this approach is to implement Rating class with IComponent interface.

```csharp
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.

```csharp
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.

```csharp
    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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/41by4uq0w3yd8b3rs1p1.png)

The output looks like below.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ncui25z14ss9lonao3nl.png)

### 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 !!