Implementation:FlowiseAI Flowise MemoizedReactMarkdown

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Markdown Rendering
Last Updated	2026-02-12 07:00 GMT

Overview

The MemoizedReactMarkdown component is a performance-optimized wrapper around ReactMarkdown that adds automatic LaTeX detection, LaTeX preprocessing, GFM table support, and custom code block rendering via CodeBlock.

Description

MemoizedReactMarkdown uses React.memo with a custom equality function that performs shallow comparison of props (skipping complex objects like components and plugin arrays) and deep-checks the children string. Before rendering, it preprocesses the markdown text with preprocessLatex to convert \[...\] and \(...\) notation into dollar-sign formats more compatible with remark-math and rehype-mathjax. The containsLaTeX utility detects 13 LaTeX patterns (including block math, inline math, environments, and common commands) to conditionally enable math rendering. Code blocks are rendered using the CodeBlock component with syntax highlighting, while paragraphs preserve whitespace with pre-line styling.

Usage

Use this component to render AI chat responses or any markdown content that may contain code blocks, tables, and mathematical expressions with optimal re-render performance.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/markdown/MemoizedReactMarkdown.jsx
• Lines: 1-164

Signature

export const MemoizedReactMarkdown = memo(
    ({ children, ...props }) => {
        // ...
    },
    (prevProps, nextProps) => {
        // Custom equality check
    }
)

Import

import { MemoizedReactMarkdown } from '@/ui-component/markdown/MemoizedReactMarkdown'

I/O Contract

Inputs

Name	Type	Required	Description
children	any	Yes	Markdown string content to render
chatflowid	string	No	Chatflow ID passed to CodeBlock for download filename generation
isFullWidth	bool	No	Controls whether code blocks render at full width
remarkPlugins	array	No	Custom remark plugins (overrides default remarkGfm and remarkMath)
rehypePlugins	array	No	Custom rehype plugins (overrides default rehypeMathjax)
components	object	No	Custom ReactMarkdown component overrides (merged with defaults)
forceMath	bool	No	When true, forces math rendering even if no LaTeX is detected
disableMath	bool	No	When true, disables math rendering entirely
mathPatterns	array	No	Additional regex patterns for LaTeX detection

Outputs

Name	Type	Description
Rendered JSX	React element	A div with class "react-markdown" containing the rendered markdown with code blocks, tables, and optional math

Usage Examples

Basic Usage

<MemoizedReactMarkdown
    chatflowid="flow_abc123"
    isFullWidth={true}
>
    {`# Hello World\n\nHere is some **bold** text and a code block:\n\n\`\`\`python\nprint("hello")\n\`\`\`\n\nAnd some math: $$E = mc^2$$`}
</MemoizedReactMarkdown>

Related Pages

• Principle:FlowiseAI_Flowise_Chat_Prediction