Usage of Dispose

[candritzky]

Hi Carl,

thanks once more for putting this gem together.

I have some questions on the CanvasHelper.razor.cs code which I do not fully understand:

1. Why is the _moduleTask implemented as a Lazy<Task>? Couldn't that be done with a simpler await _jsRuntime.InvokeAsync(...) call? What's the purpose of making it Lazy here?
2. You're passing DotNetReference.Create(this) to the initRenderJS function. I think this reference needs to be stored and disposed of in DisposeAsync to avoid memory leaks.
3. You're callilng await module.DisposeAsync() directly from within the Initialize method. Doesn't this dispose of the module which should be kept alive for the lifetime of the component? Wouldn't it be sufficient (or even better) to call this only from DisposeAsync?
4. Wouldn't it be better/more convenient to have the CanvasHelper component overwrite OnAfterRenderAsync and initialize itself (when firstRender==true) instead of having the consumer call it from his OnAfterRenderAsync implementation?

Thanks,
Chris

[foxdrm]

Carl, this was a huge help. Thank you for sharing this!

I agree with Chris on point 2 above. I was experiencing memory leaks when I navigated away from the page containing the canvas. The RenderFrame task continued firing long after DisposeAsync() had been fired in the CanvasHelper, bogging down the whole site. I modified the CanvasHelper like so, and now it works great:

    public DotNetObjectReference<CanvasHelper> dotNetObjectReference { get; set; }

    public async Task Initialize()
    {
        // We need to specify the .js file path relative to this code
        _moduleTask = new(() => _jsRuntime.InvokeAsync<IJSObjectReference>(
            "import", "./_content/Fox.CompressorWeb/Helpers/CanvasHelper.razor.js").AsTask());

        // Load the module
        var module = await _moduleTask.Value;

        // Initialize
        dotNetObjectReference = DotNetObjectReference.Create(this);
        await module.InvokeVoidAsync("initRenderJS", dotNetObjectReference);
        
        // Dispose the module
        await module.DisposeAsync();
    }

    public async ValueTask DisposeAsync()
    {
        if (_moduleTask != null && _moduleTask.IsValueCreated)
        {
            var module = await _moduleTask.Value;
            await module.DisposeAsync();
            dotNetObjectReference.Dispose();
        }
    }

Note: my implementation is Blazor Server-Side in .NET 6.