Improve Katex rendering

I just came across the same issue, on a desktop (macOS) environment.
Editing a 6~7 KB document, with several images & KaTex codes makes it too slow to type.

Testing on a desktop build, it seems the NoteText component renders upto 6 times on a key input -- like typing a single "a" key on a blank document.
Each call on NoteText.render calls the NoteTextViewer.render as well, no matter what the viewer style is. That is, the markdown render window will keep on rendering even if I set to Editor mode only.

Adding a simple shouldComponentUpdate function like the following to the NoteTextViewer class would unnecessary rendering:

	shouldComponentUpdate(nextProps, nextState) {
		if ((nextProps.viewerStyle || {}).width === 0) {
			return false;
		return true;

Any reason why you haven't add any render optimizations yet?
I understand that premature optimization can cause headaches, but coming from the other end of unbearable experience, I hope we can enhance it somehow.

Note that this does not help multiple calls on NoteText.render. Haven't read the code thoroughly yet, and that seems like coming from a different issue (background sync, maybe?)

This doesn't however stop from actually parsing the markdown text, which seems to be done in NoteText.markupToHtml. Just hoping the async function doesn't take too much time.

I am a developer who knows React (but not React Native).
Is there anything that can be done? Or is there some specific reason the optimization is on hold? Maybe I can put some time in it if you give me some clues to start diving in :slight_smile:
Surprisingly, the editing on iPad is not slow at all. Maybe is using a different component?


1 Like


The version of the source code I’ve looked into was

Joplin 1.0.185 (dev, darwin)
Revision: 16fb1bda (master)