Next.js中如何避免react-markdown组件不必要的重渲染？

问题描述 #

开发Next.js项目时，使用react-markdown库遇到持续重渲染问题：每次输入内容（无论输入位置），通过Options.components定义的自定义code组件都会重复渲染。

补充信息 #

• 演示视频显示，输入操作触发重渲染时，pre标签（对应自定义代码块）会重复渲染，但p标签不会——仅在components属性中自定义了code组件。
• 已设置reactStrictMode: false进行测试，问题依然存在。

相关代码片段 #

<ReactMarkdown
  sourcePos
  components={{
    code({ node, inline, className, children, ...props }) {
      const match = /language-(\w+)/.exec(className || "");
      return ...
    },
  }}
>
  {markdown}
</ReactMarkdown>

疑问与需求 #

通过components属性的code函数自定义代码块后，按照React组件重渲染逻辑，只有组件依赖的状态或props变化时才应触发重渲染，但目前无关输入也会导致code组件重渲染。

已查阅官方文档及相关问题但未找到原因，希望了解：

• 该重渲染问题的具体原因
• 可行的解决方法
• react-markdown库与此相关的特性说明

内容的提问来源于stack exchange，提问作者Guan-Bo Yang