[Bug]: Performance Issue when documents have ReactNodeViewRenderer

[rajatkulkarni95]

Affected Packages

core, react

Version(s)

2.6.2

Bug Description

Attaching two videos, one with ReactNodeViewRenderer used for Table / Image and CodeBlock, and the other without them.

The doc has 10k words in it, and you can see via the FPS Counter that the former causes huge drops.

With ReactNodeViewRenderer

Screen.Recording.2024-09-08.at.14.41.06.mov

Without it

Screen.Recording.2024-09-08.at.14.41.33.mov

Browser Used

Safari

Code Example URL

No response

Expected Behavior

It shouldn't have this stark of a difference in performance.

Additional Context (Optional)

No response

Dependency Updates

• Yes, I've updated all my dependencies.

[Nantris]

Your initial video shows both much higher and much lower values than the second video - but I wouldn't expect to see substantially higher values at any time. Just a bit odd.

I wonder if your results change if the cursor isn't hovering the page. Perhaps there's some interaction with mouse handler logic that could be addressed.

[rajatkulkarni95]

Your initial video shows both much higher and much lower values than the second video - but I wouldn't expect to see substantially higher values at any time. Just a bit odd.

I wonder if your results change if the cursor isn't hovering the page. Perhaps there's some interaction with mouse handler logic that could be addressed.

The FPS fluctuates, but there's a huge drop when react node views are used compared to not. Like scrolling becomes an actual problem even if there's like a few custom tables vs the default ones.

[nperez0111]

I think @Nantris is right here, scrolling should have no effect on re-rendering so you must have some logic that has to do with mouse hovering or scroll events or something.

React does incur a cost per render, but I've spent a lot of time recently to make it as fast as possible with Tiptap 2.5 and further updates. So it is as fast as could possibly be.

So there is likely something wrong in your application not necessarily running things in React.