Editor slows down gradually as you type, and leaks large amounts of memory

[bhallstein]

When you initially type into the editor, it is pretty responsive. The more edits you make (the more key presses accumulate inside plain and rich text editors), the slower it becomes. This is not affected by the amount of text present, but the number of key presses that have occurred in the editor since page load.

As you type, the memory footprint of the page also grows. After doing a medium amount of typing, the page has grown from a starting point of ~150MB to ~1GB. At this point visual updates from typing are very slow and CPU usage is very high.

Thinking about where this might be at a high level:

• React query or our handling of it
• Tip Tap editor or our handling of it (seems less likely as the memory leak also happens when typing into a plain text field, but perhaps still possible as render cycle may recreate callback functions in other fields?)
• Other location in our own code — app code, store code, water weasel code
• Multiple

Probably also worth looking into tools that can help identify where memory leaks are occurring.

Quite a serious bug as makes the app borderline unusable after typing any significant amount of text.

[pjrundle]

Have seen this too.

Wonder if Immer is a problem here, found this package which could be a simple swap out from a quick read.

https://dev.to/unadlib/mutative-10x-faster-than-immer-2060

[bhallstein]

Progress:

• TipTap & ProseMirror have had a few memory leak issues: https://github.com/ueberdosis/tiptap/issues/538, https://github.com/ueberdosis/tiptap/issues/499
• React-query can consume a large amount of memory: https://github.com/TanStack/query/discussions/3284
• Spent a lot of time looking at function call hierarchies in timeline recordings in the web inspector:
  • CWebTxt is a performance bottleneck due to its call to getThemeCssPropsAndBodyClasses, in a typical page render this was taking up 34ms of CPU time (if I understand what I'm looking at correctly). Can prob by easily fixed by putting the props and vars in a context.
  • The call tree for rendering is very deep so it's hard to see what's going on, but the majority of other function calls that seemed to be taking up a lot of CPU time were from react-query, and this seemed quite concerning, with individual calls to useWhateverQuery taking ~1-2 ms, which is about a thousand times slower than I would have assumed, and they're used liberally.
  • Overall render times seemed to start at 70ms and then get longer, I saw them up to about 350ms.
• The increase in memory usage seems to happen faster with typing into a rich text field than a plain text field.

With this, my current best guess is that react-query is our main issue here, but more investigation needed.

[bhallstein]

Update: more testing showed the above performance figures as taken in a Timeline recording to be inflated by around 10x.

I found what I believe was the main memory leak and performance issue, details in linked PR.