Add memo for processor to MarkdownHooks

Some plugins may perform heavy work in preparation to make the
transformer light-weight. A good example of this is
`rehype-starry-night`.

Without this change, an interactive markdown editor which includes
`rehype-starry-night` is very sluggish. With this change, performance is
as good as if `rehype-starry-night` isn’t even used.


Closes GH-909.

Reviewed-by: JounQin <[email protected]>
Reviewed-by: Titus Wormer <[email protected]>

Author: remcohaszing

lib/index.js

@@ -107,7 +107,7 @@ import {unreachable} from 'devlop'
 import {toJsxRuntime} from 'hast-util-to-jsx-runtime'
 import {urlAttributes} from 'html-url-attributes'
 import {Fragment, jsx, jsxs} from 'react/jsx-runtime'
-import {useEffect, useState} from 'react'
+import {useEffect, useMemo, useState} from 'react'
 import remarkParse from 'remark-parse'
 import remarkRehype from 'remark-rehype'
 import {unified} from 'unified'
@@ -212,7 +212,12 @@ export async function MarkdownAsync(options) {
  *   React node.
  */
 export function MarkdownHooks(options) {
-  const processor = createProcessor(options)
+  const processor = useMemo(
+    function () {
+      return createProcessor(options)
+    },
+    [options.rehypePlugins, options.remarkPlugins, options.remarkRehypeOptions]
+  )
   const [error, setError] = useState(
     /** @type {Error | undefined} */ (undefined)
   )
@@ -238,12 +243,7 @@ export function MarkdownHooks(options) {
         cancelled = true
       }
     },
-    [
-      options.children,
-      options.rehypePlugins,
-      options.remarkPlugins,
-      options.remarkRehypeOptions
-    ]
+    [options.children, processor]
   )
 
   if (error) throw error