singlexyz/ChatGPT-Next-Web
1
0
Fork 0
forked from XiaoMo/ChatGPT-Next-Web
Code Pull Requests Activity

perf: memorize markdown rendering

Browse Source 
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
This commit is contained in:
Jun Wu 2023-04-05 00:15:48 -07:00
parent 4542c18385
commit 962f434e17
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/chat.tsx
View File

@ -1,5 +1,5 @@
import { useDebouncedCallback } from "use-debounce"; 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 SendWhiteIcon from "../icons/send-white.svg";
import BrainIcon from "../icons/brain.svg"; import BrainIcon from "../icons/brain.svg";
@ -33,7 +33,7 @@ import chatStyle from "./chat.module.scss";
import { Modal, showModal, showToast } from "./ui-lib"; 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 />, loading: () => <LoadingIcon />,
}); });