Add note on performance of evaluate

Closes GH-1655.
mdx-js · Oct 20, 2021 · b3e64dc · b3e64dc
1 parent d636735
commit b3e64dc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/mdx/readme.md b/packages/mdx/readme.md
@@ -737,6 +737,22 @@ console.log(await evaluate(file, {...runtime}))
 
 </details>
 
+###### Note: Performance
+
+Compiling (and running) MDX takes time.
+If you’re live-rendering a string of MDX that often changes using a virtual DOM
+based framework (such as React), one performance improvement is to call the
+`MDXContent` component yourself.
+The reason is that the `evaluate` creates a new function each time, which cannot
+be diffed:
+
+```diff
+ const {default: MDXContent} = await evaluate('…')
+
+-<MDXContent {...props} />
++MDXContent(props)
+```
+
 ### `evaluateSync(file, options)`
 
 Compile and run MDX.