Skip to content

perf: optimize code block rendering performance #3135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 4, 2025
Merged

perf: optimize code block rendering performance #3135

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 42 additions & 8 deletions webview-ui/src/components/common/CodeBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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
Loading