memorize DrawioViewer

packages/app/src/services/renderer/renderer.tsx

@@ -351,7 +351,7 @@ export const generateViewOptions = (
     components.h2 = Header;
     components.h3 = Header;
     components.lsx = props => <Lsx {...props} forceToFetchData />;
-    components.drawio = props => <drawioPlugin.DrawioViewer {...props} />;
+    components.drawio = drawioPlugin.DrawioViewer;
   }
 
   // // Add configurers for viewer
@@ -424,7 +424,7 @@ export const generateSimpleViewOptions = (config: RendererConfig, pagePath: stri
   // add components
   if (components != null) {
     components.lsx = props => <Lsx {...props} />;
-    components.drawio = props => <drawioPlugin.DrawioViewer {...props} />;
+    components.drawio = drawioPlugin.DrawioViewer;
   }
 
   verifySanitizePlugin(options, false);
@@ -464,7 +464,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
   // add components
   if (components != null) {
     components.lsx = props => <Lsx {...props} />;
-    components.drawio = props => <drawioPlugin.DrawioViewer {...props} />;
+    components.drawio = drawioPlugin.DrawioViewer;
   }
 
   // verifySanitizePlugin(options, false);

packages/remark-drawio-plugin/src/components/DrawioViewer.tsx

@@ -27,7 +27,7 @@ type Props = {
   children?: ReactNode,
 }
 
-export const DrawioViewer = (props: Props): JSX.Element => {
+export const DrawioViewer = React.memo((props: Props): JSX.Element => {
   const {
     diagramIndex, bol, eol, children,
   } = props;
@@ -60,22 +60,26 @@ export const DrawioViewer = (props: Props): JSX.Element => {
 
   const renderDrawioWithDebounce = useMemo(() => debounce(200, renderDrawio), [renderDrawio]);
 
-  useEffect(() => {
-    renderDrawioWithDebounce();
-  }, [renderDrawioWithDebounce]);
+  const mxgraphHtml = useMemo(() => {
+    if (children == null) {
+      return '';
+    }
 
+    const code = children instanceof Array
+      ? children.map(e => e?.toString()).join('')
+      : children.toString();
 
-  if (children == null) {
-    return <></>;
-  }
+    const mxgraphData = generateMxgraphData(code, diagramIndex);
 
-  const code = children instanceof Array
-    ? children.map(e => e?.toString()).join('')
-    : children.toString();
+    return `<div class="mxgraph" data-mxgraph="${mxgraphData}"></div>`;
 
-  const mxgraphData = generateMxgraphData(code, diagramIndex);
+  }, [children, diagramIndex]);
 
-  const mxgraphHtml = `<div class="mxgraph" data-mxgraph="${mxgraphData}"></div>`;
+  useEffect(() => {
+    if (mxgraphHtml.length > 0) {
+      renderDrawioWithDebounce();
+    }
+  }, [mxgraphHtml.length, renderDrawioWithDebounce]);
 
   return (
     <div
@@ -89,4 +93,5 @@ export const DrawioViewer = (props: Props): JSX.Element => {
       <div dangerouslySetInnerHTML={{ __html: mxgraphHtml }} />
     </div>
   );
-};
+});
+DrawioViewer.displayName = 'DrawioViewer';