Using React Transitions for low priority text editor updates

(handlewithcare.dev)

2 points | by smoores 1 day ago

1 comments

  • smoores 1 day ago
    Howdy! 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 <ProseMirror /> 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.