From ef3986c80290abebafd1c40e972b40238b0e14c8 Mon Sep 17 00:00:00 2001
From: Remco Haszing <remcohaszing@gmail.com>
Date: Wed, 5 Mar 2025 15:13:35 +0100
Subject: [PATCH] Handle race conditions in MarkdownHooks

Running asynchronous code inside a `useEffect` causes race conditions.
This is now handled correctly.
---
 lib/index.js | 11 +++++++++--
 test.jsx     | 21 +++++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/lib/index.js b/lib/index.js
index c606747..42fbe58 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -207,11 +207,18 @@ export function MarkdownHooks(options) {
 
   useEffect(
     function () {
+      let cancelled = false
       const file = createFile(options)
       processor.run(processor.parse(file), file, function (error, tree) {
-        setError(error)
-        setTree(tree)
+        if (!cancelled) {
+          setError(error)
+          setTree(tree)
+        }
       })
+
+      return () => {
+        cancelled = true
+      }
     },
     [
       options.children,
diff --git a/test.jsx b/test.jsx
index 8bbf4f7..12b6caa 100644
--- a/test.jsx
+++ b/test.jsx
@@ -1165,6 +1165,27 @@ test('MarkdownHooks', async function (t) {
     })
     assert.equal(container.innerHTML, 'Error: rejected')
   })
+
+  await t.test('should support `MarkdownHooks` rerenders', async function () {
+    const pluginA = deferPlugin()
+    const pluginB = deferPlugin()
+
+    const result = render(
+      <MarkdownHooks children={'a'} rehypePlugins={[pluginA.plugin]} />
+    )
+
+    result.rerender(
+      <MarkdownHooks children={'b'} rehypePlugins={[pluginB.plugin]} />
+    )
+
+    assert.equal(result.container.innerHTML, '')
+    pluginB.resolve()
+    pluginA.resolve()
+    await waitFor(() => {
+      assert.notEqual(result.container.innerHTML, '')
+    })
+    assert.equal(result.container.innerHTML, '<p>b</p>')
+  })
 })
 
 /**