pacnpal/Roo-Code
1
0
Fork 0
mirror of https://github.com/pacnpal/Roo-Code.git synced 2025-12-23 22:01:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

Performance optimizations with memoization and useCallbacks

Browse Source
This commit is contained in:
Saoud Rizwan
2024-09-06 14:35:02 -04:00
parent 76868f21d1
commit 428d3c39b5
12 changed files with 578 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
webview-ui/src/components/CodeBlock.tsx
View File

@@ -1,4 +1,4 @@
import { useMemo } from "react"
import { memo, useMemo } from "react"
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
import { getLanguageFromPath } from "../utils/getLanguageFromPath"
import { SyntaxHighlighterStyle } from "../utils/getSyntaxHighlighterStyleFromTheme"
@@ -67,6 +67,14 @@ interface CodeBlockProps {
onToggleExpand: () => void
}
/*
We need to remove leading non-alphanumeric characters from the path in order for our leading ellipses trick to work.
^: Anchors the match to the start of the string.
[^a-zA-Z0-9]+: Matches one or more characters that are not alphanumeric.
The replace method removes these matched characters, effectively trimming the string up to the first alphanumeric character.
*/
const removeLeadingNonAlphanumeric = (path: string): string => path.replace(/^[^a-zA-Z0-9]+/, "")
const CodeBlock = ({
code,
diff,
@@ -76,15 +84,6 @@ const CodeBlock = ({
isExpanded,
onToggleExpand,
}: CodeBlockProps) => {
/*
We need to remove leading non-alphanumeric characters from the path in order for our leading ellipses trick to work.
^: Anchors the match to the start of the string.
[^a-zA-Z0-9]+: Matches one or more characters that are not alphanumeric.
The replace method removes these matched characters, effectively trimming the string up to the first alphanumeric character.
*/
const removeLeadingNonAlphanumeric = (path: string): string => path.replace(/^[^a-zA-Z0-9]+/, "")
const inferredLanguage = useMemo(
() => code && (language ?? (path ? getLanguageFromPath(path) : undefined)),
[path, language, code]
@@ -168,5 +167,5 @@ const CodeBlock = ({
</div>
)
}
export default CodeBlock
// memo does shallow comparison of props, so if you need it to re-render when a nested object changes, you need to pass a custom comparison function
export default memo(CodeBlock)