WebAssembly Performance in Blazor RichTextEditor Component

12 Sep 20232 minutes to read

This section provides performance guidelines for using Syncfusion RichTextEditor 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 RichTextEditor component and its child component will be checked for re-rendering. For instance, having an EventCallBack on the application or RichTextEditor will check every child component once the event callback is completed.

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

In the following example:

• PreventRender method is called in the IncrementCount method which is a click callback.
• Now, the RichTextEditor 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 RichTextEditor component completes initial rendering. Calling this method during initial rendering will not have any effect.

Avoid unnecessary component renders after RichTextEditor events

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

You can prevent this re-rendering of the RichTextEditor 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 RichTextEditor to prevent rendering.
  
  * It is recommended to use the PreventRender method for user interactive events such as OnToolbarClick, UpdatedToolbarStatus, etc., for better performance.