From 962f434e17be9ec802626db897b1682edef264c6 Mon Sep 17 00:00:00 2001
From: Jun Wu <quark@lihdd.net>
Date: Wed, 5 Apr 2023 00:15:48 -0700
Subject: [PATCH] perf: memorize markdown rendering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 app/components/chat.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 6cd229cc3..599921d2e 100644
--- a/app/components/chat.tsx
+++ b/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 />,
 });