Optimize markdown render for editor by throttling

Author: velopert

src/components/common/MarkdownRender.tsx

@@ -226,15 +226,11 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
 
   const [element, setElement] = useState<RenderedElement>(null);
   const [hasTagError, setHasTagError] = useState(false);
+  const [delay, setDelay] = useState(25);
 
-  const applyElement = React.useMemo(() => {
-    return throttle(250, (el: any) => {
-      setElement(el);
-    });
-  }, []);
-
-  useEffect(() => {
-    remark()
+  const throttledUpdate = React.useMemo(() => {
+    return throttle(delay, (markdown: string) => {
+      remark()
       .use(remarkParse)
       .use(slug)
       .use(prismPlugin)
@@ -246,6 +242,11 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
       .use(katex)
       .use(stringify)
       .process(markdown, (err: any, file: any) => {
+        const lines = markdown.split(/\r\n|\r|\n/).length
+        const nextDelay = Math.max(Math.min(Math.floor(lines * 0.5), 1500), 22)
+        if (nextDelay !== delay) {
+          setDelay(nextDelay)
+        }
         const html = String(file);
 
         if (onConvertFinish) {
@@ -265,18 +266,17 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
         try {
           const el = parse(html);
           setHasTagError(false);
-          applyElement(el);
+          setElement(el);
         } catch (e) {}
-      });
-  }, [applyElement, editing, markdown, onConvertFinish]);
+    }, 1)
+    });
+  }, [delay, editing, onConvertFinish]);
+
 
-  // useEffect(() => {
-  //   if (editing) return;
-  //   const using = checkUsingMathjax(markdown);
-  //   if (using) {
-  //     loadMathjax();
-  //   }
-  // }, [html, element, markdown, editing]);
+
+  useEffect(() => {
+    throttledUpdate(markdown)    
+  }, [markdown, throttledUpdate]);
 
   return (
     <Typography>