fix(mermaid): prevent memory leak on unmount

1 files changed, 6 insertions, 1 deletions

diff --git a/packages/docs/app/components/mermaid.tsx b/packages/docs/app/components/mermaid.tsx
index 3a54a04..fe153ec 100644
--- a/packages/docs/app/components/mermaid.tsx
+++ b/packages/docs/app/components/mermaid.tsx
@@ -13,10 +13,12 @@ export function Mermaid({ chart }: { chart: string }) {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    let current = true;
     const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
     mermaid
       .render(id, chart)
       .then(({ svg }) => {
+        if (!current) return;
         const parser = new DOMParser();
         const doc = parser.parseFromString(svg, "image/svg+xml");
         const svgEl = doc.querySelector("svg");
@@ -25,8 +27,11 @@ export function Mermaid({ chart }: { chart: string }) {
         }
       })
       .catch(() => {
-        ref.current?.replaceChildren();
+        if (current) ref.current?.replaceChildren();
       });
+    return () => {
+      current = false;
+    };
   }, [chart]);
 
   return (