Using React Transitions for low priority text editor updates
handlewithcare.dev
Using React Transitions for low priority text editor updates
1–2 of 2 posts
Re: Using React Transitions for low priority text editor updates
#2Howdy! React ProseMirror maintainer here. Our collective has been helping out a client with migrating their existing text editor to use React ProseMirror from @tiptap/react. They had a very complex system for deferring updates to their miniature editor preview, which involved queuing ProseMirror transactions and applying them to a second Tiptap Editor during idle time.
While migrating to React ProseMirror, initially I tried out just passing the primary editor's EditorState directly to the preview editor's component, but the top level node view components turned out to be just slow enough to render that rendering them twice on every keypress introduced a noticeable lag. So I added a useDeferredValue to render the preview editor in a Transition! Here's a post about how that works and the tradeoffs involved. I added some interactive demos to illustrate how the Transition changes the render flow.