scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-08-28 05:27:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

perf: optimize code block rendering performance (#3135)

Browse source 
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>
This commit is contained in:
KJ7LNW 2025-05-04 13:20:33 -07:00 • committed by GitHub
parent d27b22fa59
commit bd3a42ed23
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 42 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
webview-ui/src/components/common/CodeBlock.tsx
View file

@ -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