I’m trying to reduce render count of a very heavy component which renders thousands of spans. I can’t apply virtualization because spans have different size.

<div contenteditable="true">
    @foreach (var item in els)
    {
        <span @key="@item.Key" class="@item.cssClass">@item.String</span>
    }
</div>

I made an attempt to replace span by a component which renders span and it works, but initial render time was taking too long.

I can’t do everything via js and disable rerender because root div may contain some other blazor components.

I need to apply some changes via JS without rerender, but at some time rerender happens and render state is corrupted. How can I notify blazor about changes in dom?
Or maybe I need to revert all changes made from js before render?

Change types:

1. modify span’s textContent
2. split span at some offset
3. add span into div

Do I need to use something like node.dispatchEvent(new Event(‘change’))?
Are there any possible problems here?