Blazor Component Lifecycle

Core Lifecycle Stages

Blazor components go through several key stages. Each stage is typically represented by one or more methods that you can override to hook into the component's behavior.

Key Lifecycle Methods

1. Initialization

• OnInitialized(): This method is called once when the component is first initialized. It's suitable for fetching initial data or setting up default values.
• OnInitializedAsync(): Similar to OnInitialized(), but allows for asynchronous operations, such as calling external services.

@code {
    protected override void OnInitialized()
    {
        // Perform synchronous initialization tasks
        Console.WriteLine("Component Initialized!");
    }

    protected override async Task OnInitializedAsync()
    {
        // Perform asynchronous initialization tasks
        await Task.Delay(100); // Simulate async work
        Console.WriteLine("Component Initialized Asynchronously!");
    }
}

2. Parameter Setting

• SetParametersAsync(ParameterView parameters): This is the first method called when the component is instantiated and its parameters are set. It's called before OnInitialized() and OnParametersSet(). You'll typically override this if you need to perform logic based on how parameters are changing before they are fully applied.
• OnParametersSet(): Called after OnInitialized() and whenever the component's parameters are updated. It's a good place to validate parameters or derive state from them.
• OnParametersSetAsync(): The asynchronous version of OnParametersSet(), allowing for async operations.

@code {
    [Parameter]
    public string Message { get; set; }

    protected override void OnParametersSet()
    {
        base.OnParametersSet(); // Important to call the base method
        Console.WriteLine($"Parameters set: Message = {Message}");
    }
}

3. Rendering

• ShouldRender(): This method allows you to control whether the component should re-render. By default, it returns true. Returning false can optimize performance by preventing unnecessary re-renders.
• OnAfterRender(bool firstRender): Called after the component has been rendered to the DOM. The firstRender parameter indicates if this is the initial render. This is useful for integrating with JavaScript libraries or performing DOM manipulations.
• OnAfterRenderAsync(bool firstRender): The asynchronous version of OnAfterRender().

@code {
    private int counter = 0;

    protected override bool ShouldRender()
    {
        // Only re-render if counter is even
        return counter % 2 == 0;
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            Console.WriteLine("Component rendered for the first time.");
        }
        else
        {
            Console.WriteLine("Component re-rendered.");
        }
    }

    public void IncrementCounter()
    {
        counter++;
        StateHasChanged(); // Triggers a re-render
    }
}

4. Disposal

• Dispose(bool disposing): Called when the component is being disposed of. This is where you should release any unmanaged resources, unsubscribe from events, or cancel any ongoing asynchronous operations.

@implements IDisposable

@code {
    private Timer _timer;

    protected override void OnInitialized()
    {
        _timer = new Timer(1000);
        _timer.Elapsed += async (sender, e) => await TimerElapsed();
        _timer.Start();
    }

    private async Task TimerElapsed()
    {
        Console.WriteLine("Timer ticked.");
        // Important: If updating state, use InvokeAsync
        // await InvokeAsync(() => StateHasChanged());
    }

    public void Dispose()
    {
        Dispose(true);
        GC.SuppressFinalize(this);
    }

    protected virtual void Dispose(bool disposing)
    {
        if (disposing)
        {
            _timer?.Stop();
            _timer?.Dispose();
            Console.WriteLine("Component disposed.");
        }
    }
}

The Rendering Pipeline

When a component's state changes (e.g., via StateHasChanged() or an event handler), Blazor initiates a rendering process:

1. The component's diffing process begins.
2. ShouldRender() is called. If it returns false, rendering stops for this component.
3. The component's markup is re-evaluated, and a new render tree is generated.
4. The new render tree is compared with the previous one.
5. Any differences are applied to the actual DOM.
6. OnAfterRender() or OnAfterRenderAsync() is called.

Best Practices

• Use OnInitializedAsync for initial data fetching.
• Use OnParametersSet for logic that depends on parameters.
• Use OnAfterRender for JavaScript interop or DOM manipulation.
• Implement IDisposable to clean up resources.
• Be mindful of ShouldRender for performance optimization.
• Avoid heavy computations in synchronous lifecycle methods.