From bd3a42ed23308450655c97ee42d0c92a8e354b6d Mon Sep 17 00:00:00 2001
From: KJ7LNW <93454819+KJ7LNW@users.noreply.github.com>
Date: Sun, 4 May 2025 13:20:33 -0700
Subject: [PATCH] perf: optimize code block rendering performance (#3135)

feat: optimize code block rendering performance

Memoize CodeBlock components to prevent unnecessary re-renders:
- Add MemoizedCodeContent for syntax highlighted HTML
- Add MemoizedStyledPre for container element
- Properly type all component props
- Reduce React reconciliation work for complex code blocks

Signed-off-by: Eric Wheeler <roo-code@z.ewheeler.org>
Co-authored-by: Eric Wheeler <roo-code@z.ewheeler.org>
---
 .../src/components/common/CodeBlock.tsx       | 50 ++++++++++++++++---
 1 file changed, 42 insertions(+), 8 deletions(-)

diff --git a/webview-ui/src/components/common/CodeBlock.tsx b/webview-ui/src/components/common/CodeBlock.tsx
index afd87c248f..1b295e7d1a 100644
--- a/webview-ui/src/components/common/CodeBlock.tsx
+++ b/webview-ui/src/components/common/CodeBlock.tsx
@@ -604,16 +604,15 @@ const CodeBlock = memo(
 
 		return (
 			<CodeBlockContainer ref={codeBlockRef}>
-				<StyledPre
-					ref={preRef}
+				<MemoizedStyledPre
+					preRef={preRef}
 					preStyle={preStyle}
-					wordwrap={wordWrap ? "true" : "false"}
-					windowshade={windowShade ? "true" : "false"}
+					wordWrap={wordWrap}
+					windowShade={windowShade}
 					collapsedHeight={collapsedHeight}
-					onMouseDown={() => updateCodeBlockButtonPosition(true)}
-					onMouseUp={() => updateCodeBlockButtonPosition(false)}>
-					<div dangerouslySetInnerHTML={{ __html: highlightedCode }} />
-				</StyledPre>
+					highlightedCode={highlightedCode}
+					updateCodeBlockButtonPosition={updateCodeBlockButtonPosition}
+				/>
 				{!isSelecting && (
 					<CodeBlockButtonWrapper
 						ref={copyButtonWrapperRef}
@@ -718,4 +717,39 @@ const CodeBlock = memo(
 	},
 )
 
+// Memoized content component to prevent unnecessary re-renders of highlighted code
+const MemoizedCodeContent = memo(({ html }: { html: string }) => <div dangerouslySetInnerHTML={{ __html: html }} />)
+
+// Memoized StyledPre component
+const MemoizedStyledPre = memo(
+	({
+		preRef,
+		preStyle,
+		wordWrap,
+		windowShade,
+		collapsedHeight,
+		highlightedCode,
+		updateCodeBlockButtonPosition,
+	}: {
+		preRef: React.RefObject<HTMLDivElement>
+		preStyle?: React.CSSProperties
+		wordWrap: boolean
+		windowShade: boolean
+		collapsedHeight?: number
+		highlightedCode: string
+		updateCodeBlockButtonPosition: (forceHide?: boolean) => void
+	}) => (
+		<StyledPre
+			ref={preRef}
+			preStyle={preStyle}
+			wordwrap={wordWrap ? "true" : "false"}
+			windowshade={windowShade ? "true" : "false"}
+			collapsedHeight={collapsedHeight}
+			onMouseDown={() => updateCodeBlockButtonPosition(true)}
+			onMouseUp={() => updateCodeBlockButtonPosition(false)}>
+			<MemoizedCodeContent html={highlightedCode} />
+		</StyledPre>
+	),
+)
+
 export default CodeBlock