fix: react.js error 185 maximum update depth exceeded in streaming responses during conversation (#5849)

Co-authored-by: 林星宇 <xy@udxx.cn>

web/app/components/base/markdown.tsx

@@ -7,8 +7,9 @@ import RemarkGfm from 'remark-gfm'
 import SyntaxHighlighter from 'react-syntax-highlighter'
 import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'
 import type { RefObject } from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import cn from 'classnames'
+import type { CodeComponent } from 'react-markdown/lib/ast-to-react'
 import CopyBtn from '@/app/components/base/copy-btn'
 import SVGBtn from '@/app/components/base/svg'
 import Flowchart from '@/app/components/base/mermaid'
@@ -89,21 +90,26 @@ const useLazyLoad = (ref: RefObject<Element>): boolean => {
   return isIntersecting
 }
 
-export function Markdown(props: { content: string; className?: string }) {
+// **Add code block
+// Avoid error #185 (Maximum update depth exceeded.
+// This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
+// React limits the number of nested updates to prevent infinite loops.)
+// Reference A: https://reactjs.org/docs/error-decoder.html?invariant=185
+// Reference B1: https://react.dev/reference/react/memo
+// Reference B2: https://react.dev/reference/react/useMemo
+// ****
+// The original error that occurred in the streaming response during the conversation:
+// Error: Minified React error 185;
+// visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message
+// or use the non-minified dev environment for full errors and additional helpful warnings.
+const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }) => {
   const [isSVG, setIsSVG] = useState(false)
-  const latexContent = preprocessLaTeX(props.content)
-  return (
-    <div className={cn(props.className, 'markdown-body')}>
-      <ReactMarkdown
-        remarkPlugins={[[RemarkMath, { singleDollarTextMath: false }], RemarkGfm, RemarkBreaks]}
-        rehypePlugins={[
-          RehypeKatex as any,
-        ]}
-        components={{
-          code({ inline, className, children, ...props }) {
   const match = /language-(\w+)/.exec(className || '')
   const language = match?.[1]
   const languageShowName = getCorrectCapitalizationLanguageName(language || '')
+
+  // Use `useMemo` to ensure that `SyntaxHighlighter` only re-renders when necessary
+  return useMemo(() => {
     return (!inline && match)
       ? (
         <div>
@@ -150,7 +156,22 @@ export function Markdown(props: { content: string; className?: string }) {
           {children}
         </code>
       )
-          },
+  }, [children, className, inline, isSVG, language, languageShowName, match, props])
+})
+
+CodeBlock.displayName = 'CodeBlock'
+
+export function Markdown(props: { content: string; className?: string }) {
+  const latexContent = preprocessLaTeX(props.content)
+  return (
+    <div className={cn(props.className, 'markdown-body')}>
+      <ReactMarkdown
+        remarkPlugins={[[RemarkMath, { singleDollarTextMath: false }], RemarkGfm, RemarkBreaks]}
+        rehypePlugins={[
+          RehypeKatex as any,
+        ]}
+        components={{
+          code: CodeBlock,
           img({ src, alt, ...props }) {
             return (
               // eslint-disable-next-line @next/next/no-img-element