fix(mermaid): use stable id to prevent re-mount flicker on streaming render #1947

[LLL-2005-ux]

close #1947

问题

Mermaid.tsx 第 67 行 const id = \mermaid-${uuid++}-${children?.length||0}``,
每次渲染都生成新 id（uuid++ 且流式时 children.length 变化），导致 mermaid
生成的 DOM 反复创建/销毁，引起页面抖动。

修复

使用 useRef 缓存 id，组件生命周期内只生成一次：

const idRef = useRef<string | null>(null);
if (idRef.current === null) {
  idRef.current = `mermaid-${uuid++}`;
}
const id = idRef.current;

流式渲染时 children 变化不会改变 id，DOM 不再反复 mount/unmount，
解决关联抖动问题 (#1742)。

改动文件

• packages/x/components/mermaid/Mermaid.tsx

验证

• 流式场景下 Mermaid 渲染不再抖动
• 与上游 ant-design/x main 可以自动 merge

Summary by CodeRabbit

• Bug Fixes
  • 修复 Mermaid 图表组件在重新渲染时生成不稳定渲染标识的问题。
  • 提升图表渲染的稳定性，避免潜在的显示异常。

[coderabbitai]

📝 Walkthrough

Walkthrough

Mermaid 组件使用 useRef 保存稳定的实例 ID。组件首次初始化时递增全局计数器，后续渲染不再根据 children 长度生成新 ID。

Changes

Mermaid ID 稳定化

Layer / File(s)	Summary
稳定的组件实例 ID packages/x/components/mermaid/Mermaid.tsx	组件首次初始化时生成 mermaid-${uuid++}，并通过 useRef 在后续渲染中复用该 ID。

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• ant-design/x#1975：同样调整 Mermaid.tsx 的 ID 稳定性，但使用 useId 而非 useRef。

Suggested reviewers: kimteayon

Poem

小兔守着 Mermaid 图，
稳定 ID 不再跳。
流式文字慢慢长，
组件不再反复跑。
useRef 轻轻抱住它，
图表安静画到好。

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	改动稳定了 Mermaid ID，但未覆盖流式增量防抖、性能对比和回归单测要求。[#1947]	补充流式增量防抖逻辑，并增加性能对比和回归单测。

✅ Passed checks (4 passed)

Check name	Status	Explanation
Out of Scope Changes check	✅ Passed	改动仅涉及 Mermaid 组件的 ID 稳定化，与关联问题的修复目标一致。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题准确概括了为 Mermaid 使用稳定 ID 以避免流式渲染抖动这一主要变更。

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/x/components/mermaid/Mermaid.tsx (1)

67-72: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

补充稳定 ID 的回归断言。

packages/x/components/mermaid/__tests__/index.test.tsx:901-914 只验证连续 rerender 后 mockRender 被调用。它没有验证 children 变化后传给 mermaid.render 的第一个参数保持不变。请补充该断言，避免后续改动重新引入流式渲染抖动而测试仍然通过。

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/x/components/mermaid/Mermaid.tsx` around lines 67 - 72, 在 Mermaid
组件测试中补充 children 变化后的稳定 ID 回归断言：围绕 mermaid.render 的 mockRender
调用，先记录初次渲染传入的第一个参数，再 rerender 不同 children 并断言该参数保持不变；保留现有连续 rerender 调用断言。

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/x/components/mermaid/Mermaid.tsx`:
- Around line 67-72: 在 Mermaid 组件测试中补充 children 变化后的稳定 ID 回归断言：围绕 mermaid.render
的 mockRender 调用，先记录初次渲染传入的第一个参数，再 rerender 不同 children 并断言该参数保持不变；保留现有连续
rerender 调用断言。

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 3c65bd02-e829-446e-a2a0-cc4c3c51def3

📥 Commits

Reviewing files that changed from the base of the PR and between 25aad7b and 8601981.

📒 Files selected for processing (1)

• packages/x/components/mermaid/Mermaid.tsx

[LLL-2005-ux]

#1947

[LLL-2005-ux]

#1947