🐛 Bug: Random key in CodeBlock (@copilotkit/react-ui) causes flickering during streaming

[RowanLane]

Description

While using @copilotkit/react-ui@1.10.6 we noticed that code blocks in chat messages flicker whenever:

• the chat viewport is scrolled (React re-renders the list), or
• the assistant streams additional markdown into an existing message.

Root cause: the CodeBlock component rendered by Markdown sets key={Math.random()} on the underlying syntax highlighter. React therefore treats every update as a brand-new subtree, unmounting and remounting the code block on each render. The syntax highlighter starts over, producing a noticeable color flash.

Expected behaviour

Code blocks should preserve their DOM/state across re-renders so that syntax highlighting remains stable during scrolling and streaming updates.

Actual behaviour

Because the key changes on every render, React remounts the code block. Users see the highlighted code briefly disappear/reflash anytime the message list re-renders (e.g. when new tokens arrive).

Suggested fix

Replace the random key with a stable value derived from the block’s content (e.g. a hash of the language + value). That keeps React from remounting the subtree while still allowing different snippets to coexist.

Environment

• @copilotkit/react-ui v1.10.6
• React 18 / Next.js 14 (app router)

Thanks for all the work on CopilotKit! A stable key would immediately fix the UX regression without requiring downstream overrides.

[copilotkit-support-bot]

The flickering issue with code blocks in @copilotkit/react-ui is caused by the use of key={Math.random()} in the Markdown component that renders CodeBlock instances. This causes React to remount the code block on every render, leading to the observed flicker during scrolling or streaming updates.

Details

Root Cause Analysis

The key={Math.random()} usage is not in the CodeBlock component itself, but rather in the Markdown component that renders CodeBlock instances:

Location: CopilotKit/packages/react-ui/src/components/chat/Markdown.tsx (line 57)

<CodeBlock
  key={Math.random()}
  language={(match && match[1]) || ""}
  value={String(children).replace(/\n$/, "")}
  {...props}
/>

Why This Causes Flickering

The random key forces React to treat each CodeBlock as completely new on every render, which causes:

• Full component remount instead of efficient updates
• Loss of internal component state
• Flickering during streaming/scrolling as components are destroyed and recreated
• Performance degradation by defeating the React.memo optimization in the CodeBlock component

Current Component Status

The CodeBlock component itself is actually properly optimized:
• Uses React.memo for performance
• Has stable internal structure
• Contains no Math.random() usage

Recommended Fix

Replace the random key with a stable key based on content:

// Option 1: Content-based hash key
const contentKey = btoa(String(children) + (match?.[1] || "")).replace(/[^a-zA-Z0-9]/g, "");

<CodeBlock
  key={contentKey}
  language={(match && match[1]) || ""}
  value={String(children).replace(/\n$/, "")}
  {...props}
/>

// Option 2: Simple content + language key
<CodeBlock
  key={`${String(children).slice(0, 50)}-${match?.[1] || ""}`}
  language={(match && match[1]) || ""}
  value={String(children).replace(/\n$/, "")}
  {...props}
/>

Evidence of Ongoing Issues

The changelog shows multiple entries related to re-render issues:
• "fix: memoize nested components to not rerender when content changes"
• Multiple mentions of "Inline codeblock style to avoid ESM error"

Contributing a Fix

This would be an excellent contribution to the CopilotKit project. You can:

• File an issue: https://github.com/CopilotKit/CopilotKit/issues
• Submit a PR: Target the Markdown.tsx file with a stable key implementation
• Reference documentation: Contributing Guidelines

The fix would significantly improve the streaming experience and eliminate the flickering issue during scrolling.

---

Was this helpful?

If this solution worked for you, please click on the appropriate option below to help us improve:

✅ Issue Solved | ❌ Need more help