Bladeren bron

perf: memorize markdown rendering

Markdown rendering can take time. Use `React.memo` for better performance.

The improvement is especially visible if there are complex elements. For
example, a `<Chat />` with an output of `如何推导三次方程求根方程?` (which
uses latex) now renders in about 5ms, down from ~140ms.

Related: #302
Jun Wu 2 jaren geleden
bovenliggende
commit
962f434e17
1 gewijzigde bestanden met toevoegingen van 2 en 2 verwijderingen
  1. 2 2
      app/components/chat.tsx

+ 2 - 2
app/components/chat.tsx

@@ -1,5 +1,5 @@
 import { useDebouncedCallback } from "use-debounce";
-import { useState, useRef, useEffect, useLayoutEffect } from "react";
+import { memo, useState, useRef, useEffect, useLayoutEffect } from "react";
 
 import SendWhiteIcon from "../icons/send-white.svg";
 import BrainIcon from "../icons/brain.svg";
@@ -33,7 +33,7 @@ import chatStyle from "./chat.module.scss";
 
 import { Modal, showModal, showToast } from "./ui-lib";
 
-const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
+const Markdown = dynamic(async () => memo((await import("./markdown")).Markdown), {
   loading: () => <LoadingIcon />,
 });