langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-22 04:25:29 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #5848] fix: react.js error 185 maximum update depth exceeded in streaming responses during conversation #25077

New Issue
Closed
opened 2026-02-21 20:24:14 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:24:14 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/5848

State: closed
Merged: No

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Fix issues #4232 & #3498.

What happened

When chatting, especially when the response content contains HTML code blocks, the error notification shown in the following screenshot will appear, answer response failed, and the displayed answer will be reset to blank, For example:

error screenshot in streaming responses during conversation

Error Analysis From https://reactjs.org/docs/error-decoder.html?invariant=185

After debugging, it was determined that the error may have been caused by re-renders of the SyntaxHighlighter component.

Caution

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.

What to do

Avoiding 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. in streaming responses during conversation.

Use useMemo to ensure that SyntaxHighlighter only re-renders when necessary

……
const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }) => {
  const [isSVG, setIsSVG] = useState(false)
  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(() => {
    ……
  }, [children, className, inline, isSVG, language, languageShowName, match, props])
})

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, // Modified here
          ……
        }}
        linkTarget='_blank'
      >
        {/* Markdown detect has problem. */}
        {latexContent}
      </ReactMarkdown>
    </div>
  )
}
……

Type of Change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

  • Unit testing has passed

Suggested Checklist:

  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
    -[x] My changes generate no new warnings
  • I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
  • yarn dev, Running, Start chatting, Ask questions related to "HTML code", and Successfully returned the HTML code without any errors
  • optional I have made corresponding changes to the documentation
  • optional I have added tests that prove my fix is effective or that my feature works
  • optional New and existing unit tests pass locally with my changes

Reference

**Original Pull Request:** https://github.com/langgenius/dify/pull/5848 **State:** closed **Merged:** No --- # Description Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. ## Fix issues #4232 & #3498. ## What happened When chatting, especially when the response content contains HTML code blocks, the error notification shown in the following screenshot will appear, answer response failed, and the displayed answer will be reset to blank, For example: ![error screenshot in streaming responses during conversation](https://github.com/langgenius/dify/assets/34761674/fab8e527-7e51-4fd0-9411-4c04d3cefb82) ### Error Analysis From https://reactjs.org/docs/error-decoder.html?invariant=185 After debugging, it was determined that the error may have been caused by re-renders of the `SyntaxHighlighter` component. > [!CAUTION] > **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.** ## What to do Avoiding `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.` in streaming responses during conversation. ### Use `useMemo` to ensure that `SyntaxHighlighter` only re-renders when necessary ```javascript …… const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }) => { const [isSVG, setIsSVG] = useState(false) 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(() => { …… }, [children, className, inline, isSVG, language, languageShowName, match, props]) }) 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, // Modified here …… }} linkTarget='_blank' > {/* Markdown detect has problem. */} {latexContent} </ReactMarkdown> </div> ) } …… ``` ## Type of Change Please delete options that are not relevant. - [x] Bug fix (non-breaking change which fixes an issue) # How Has This Been Tested? Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration - [x] Unit testing has passed # Suggested Checklist: - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas -[x] My changes generate no new warnings - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods - [x] `yarn dev`, Running, Start chatting, Ask questions related to "HTML code", and Successfully returned the HTML code without any errors - [ ] `optional` I have made corresponding changes to the documentation - [ ] `optional` I have added tests that prove my fix is effective or that my feature works - [ ] `optional` New and existing unit tests pass locally with my changes # Reference * 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
yindo added the pull-request label 2026-02-21 20:24:14 -05:00
yindo closed this issue 2026-02-21 20:24:14 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#25077
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?