WebAssembly Performance in Blazor Rich Text Editor Component

18 Nov 20183 minutes to read

This section outlines performance best practices for using Rich Text Editor component efficiently in Blazor WebAssembly application. The best practice or guidelines for general framework Blazor WebAssembly performance can be found here.

NOTE

You can refer to our Getting Started with Blazor Server-Side RichTextEditor and Blazor WebAssembly RichTextEditor documentation pages for configuration specifications.

Avoid unnecessary component renders

During the Blazor Diffing Algorithm, every view of the Rich Text Editor component and its child component will be checked for re-rendering. For instance, having an EventCallBack on the application or Rich Text Editor will check every child component once the event callback is completed.

You can have fine-grained control over the Rich Text Editor component rendering. PreventRender method helps to avoid unnecessary re-rendering of the Rich Text Editor component. This method internally overrides the ShouldRender method of the Rich Text Editor to prevent rendering.

In the following example:

  • PreventRender method is called in the IncrementCount method which is a click callback.
  • Now, the Rich Text Editor component will not be a part of the rendering, which happens as a result of the click event, and currentCount alone will get updated.
@using Syncfusion.Blazor.RichTextEditor

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<SfRichTextEditor @ref="rteObj"> 
    <p>The Rich Text Editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p> 
</SfRichTextEditor>

@code {
    SfRichTextEditor rteObj;
    private int currentCount = 0;
    private void IncrementCount()
    {
        rteObj.PreventRender();
        currentCount++;
    }
}

NOTE

PreventRender method accepts the boolean argument that accepts true or false to disable or enable rendering, respectively.

PreventRender method can be used only after the Rich Text Editor component completes initial rendering. Calling this method during initial rendering has no effect.

Avoid unnecessary component renders after Rich Text Editor events

When a callback method is assigned to the Rich Text Editor events, then the StateHasChanged will be called in the parent component of the Rich Text Editor automatically once the event is completed.

Prevent unnecessary re-rendering of the Rich Text Editor component by calling the PreventRender method.

In the following example:

OnToolbarClick event is bound to a callback method, when the editor content gets changed by toolbar action the event is completed, the StateHasChanged will be invoked for the parent component.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor @ref="rteObj">
    <RichTextEditorEvents OnToolbarClick="@ToolbarClick"/>
</SfRichTextEditor>
<div>
    <span>@((MarkupString)Output)</span>
</div>
    
@code {
    SfRichTextEditor rteObj;
    private string Output = "";
    private void ToolbarClick(ToolbarClickEventArgs args)
    {
        rteObj.PreventRender();
        this.Output = this.Output + "<span><b>OnToolbarClick</b> event called<hr></span>";
    }
}

NOTE

PreventRender method internally overrides the ShouldRender method of the Rich Text Editor to prevent rendering.

It is recommended to use the PreventRender method for user-interactive events such as OnToolbarClick, UpdatedToolbarStatus, etc., for better performance.