Fix race condition in MarkdownHooks

Running asynchronous code inside a `useEffect` causes race conditions.
This is now handled correctly.

Closes GH-896.

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

Author: remcohaszing

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,

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>')
+  })
 })
 
 /**