fix(react): optimize useEditor and useEditorState to reduce number of instances created while being performant #5432

.changeset/smooth-rice-obey.md

@@ -0,0 +1,12 @@
+---
+"@tiptap/react": patch
+---
+
+Optimize `useEditor` and `useEditorState` to reduce number of instances created while still being performant #5432
+
+The core of this change is two-fold:
+ - have the effect run on every render (i.e. without a dep array)
+ - schedule destruction of instances, but bail on the actual destruction if the instance was still mounted and a new instance had not been created yet
+
+It should plug a memory leak, where editor instances could be created but not cleaned up in strict mode.
+As well as fixing a bug where a re-render, with deps, was not applying new options that were set on `useEditor`.

.eslintrc.js

@@ -8,6 +8,15 @@ module.exports = {
     node: true,
   },
   overrides: [
+    {
+      files: [
+        './**/*.ts',
+        './**/*.tsx',
+        './**/*.js',
+        './**/*.jsx',
+      ],
+      extends: ['plugin:react-hooks/recommended'],
+    },
     {
       files: [
         './**/*.ts',

demos/src/Commands/Cut/React/index.jsx

@@ -8,10 +8,6 @@ import StarterKit from '@tiptap/starter-kit'
 import React, { useCallback } from 'react'
 
 const MenuBar = ({ editor }) => {
-  if (!editor) {
-    return null
-  }
-
   const onCutToStart = useCallback(() => {
     editor.chain().cut({ from: editor.state.selection.$from.pos, to: editor.state.selection.$to.pos }, 1).run()
   }, [editor])
@@ -20,6 +16,10 @@ const MenuBar = ({ editor }) => {
     editor.chain().cut({ from: editor.state.selection.$from.pos, to: editor.state.selection.$to.pos }, editor.state.doc.nodeSize - 2).run()
   }, [editor])
 
+  if (!editor) {
+    return null
+  }
+
   return (
     <div className="control-group">
       <div className="button-group">

demos/src/Examples/Performance/React/index.jsx

@@ -62,7 +62,7 @@ function EditorInstance({ shouldOptimizeRendering }) {
   })
 
   return (
-    <>
+    <div>
       <div className="control-group">
         <div>Number of renders: <span id="render-count">{countRenderRef.current}</span></div>
       </div>
@@ -89,12 +89,13 @@ function EditorInstance({ shouldOptimizeRendering }) {
         </BubbleMenu>
       )}
       <EditorContent editor={editor} />
-    </>
+    </div>
   )
 }
 
 const EditorControls = () => {
   const [shouldOptimizeRendering, setShouldOptimizeRendering] = React.useState(true)
+  const [rendered, setRendered] = React.useState(true)
 
   return (
     <>
@@ -123,8 +124,9 @@ const EditorControls = () => {
             Render every transaction (default behavior)
           </label>
         </div>
+        <button onClick={() => setRendered(a => !a)}>Toggle rendered</button>
       </div>
-      <EditorInstance shouldOptimizeRendering={shouldOptimizeRendering} />
+      {rendered && <EditorInstance shouldOptimizeRendering={shouldOptimizeRendering} />}
     </>
   )
 }

demos/src/GuideContent/ReadOnly/React/index.jsx

@@ -7,6 +7,7 @@ import React, { useEffect, useState } from 'react'
 export default () => {
   const [editable, setEditable] = useState(false)
   const editor = useEditor({
+    shouldRerenderOnTransaction: false,
     editable,
     content: `
         <p>