fix: Optimize code block rendering in streaming mode to prevent unnecessary re-renders (#436)

Author: WTW0313

.changeset/fix-code-block-memo.md

@@ -0,0 +1,9 @@
+---
+"streamdown": patch
+---
+
+Fix unnecessary re-renders of code blocks during streaming updates.
+
+**Problem:** In streaming mode, when new content arrives (e.g. a paragraph is appended), completed code blocks that haven't changed were still re-rendering. This happened because the `Streamdown` component used inline object literals as default parameter values for `linkSafety` (`{ enabled: true }`). Every time `children` changed and `Streamdown` re-rendered, these inline defaults created new references, which caused the `contextValue` useMemo to recompute a new `StreamdownContext` object. Since React propagates context changes through `memo` boundaries, any context consumer inside a memoized `Block` (such as `CodeBlock`) would re-render even though the block's own props were unchanged.
+
+**Fix:** Extract the inline default values for `linkSafety` into module-level constants (`defaultLinkSafetyConfig`). This ensures referential stability across renders, so `contextValue` only recomputes when the actual values change — not just because `children` updated.

packages/streamdown/__tests__/code-block-memo.test.tsx

@@ -0,0 +1,45 @@
+import { render, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { Streamdown } from "../index";
+
+let codeBlockRenderCount = 0;
+
+vi.mock("../lib/code-block", () => ({
+  CodeBlock: ({ code, children }: { code: string; children?: ReactNode }) => {
+    codeBlockRenderCount += 1;
+    return (
+      <div data-testid="mock-code-block">
+        <pre>{code}</pre>
+        {children}
+      </div>
+    );
+  },
+}));
+
+describe("MemoCode in streaming mode", () => {
+  it("should not re-render unchanged code blocks on streaming updates", async () => {
+    codeBlockRenderCount = 0;
+
+    const initial = "```js\nconst a = 1;\n```\n\nParagraph one";
+    const updated = "```js\nconst a = 1;\n```\n\nParagraph one plus";
+
+    const { container, rerender } = render(<Streamdown>{initial}</Streamdown>);
+
+    await waitFor(() => {
+      expect(container.textContent).toContain("const a = 1;");
+      expect(container.textContent).toContain("Paragraph one");
+    });
+
+    const initialRenderCount = codeBlockRenderCount;
+    expect(initialRenderCount).toBeGreaterThan(0);
+
+    rerender(<Streamdown>{updated}</Streamdown>);
+
+    await waitFor(() => {
+      expect(container.textContent).toContain("Paragraph one plus");
+    });
+
+    expect(codeBlockRenderCount).toBe(initialRenderCount);
+  });
+});

packages/streamdown/index.tsx

@@ -284,13 +284,22 @@ export interface StreamdownContextType {
   shikiTheme: [ThemeInput, ThemeInput];
 }
 
+const defaultShikiTheme: [ThemeInput, ThemeInput] = [
+  "github-light",
+  "github-dark",
+];
+
+const defaultLinkSafetyConfig: LinkSafetyConfig = {
+  enabled: true,
+};
+
 const defaultStreamdownContext: StreamdownContextType = {
-  shikiTheme: ["github-light", "github-dark"],
+  shikiTheme: defaultShikiTheme,
   controls: true,
   isAnimating: false,
   mode: "streaming",
   mermaid: undefined,
-  linkSafety: { enabled: true },
+  linkSafety: defaultLinkSafetyConfig,
 };
 
 export const StreamdownContext = createContext<StreamdownContextType>(
@@ -413,11 +422,6 @@ export const Block = memo(
 
 Block.displayName = "Block";
 
-const defaultShikiTheme: [ThemeInput, ThemeInput] = [
-  "github-light",
-  "github-dark",
-];
-
 export const Streamdown = memo(
   ({
     children,
@@ -439,9 +443,7 @@ export const Streamdown = memo(
     caret,
     plugins,
     remend: remendOptions,
-    linkSafety = {
-      enabled: true,
-    },
+    linkSafety = defaultLinkSafetyConfig,
     allowedTags,
     literalTagContent,
     translations,