Performance optimizations with memoization and useCallbacks

webview-ui/src/components/TaskHeader.tsx

@@ -1,5 +1,5 @@
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
-import React, { useEffect, useRef, useState } from "react"
+import React, { memo, useEffect, useRef, useState } from "react"
 import { useWindowSize } from "react-use"
 import { ClaudeMessage } from "../../../src/shared/ExtensionMessage"
 import { useExtensionState } from "../context/ExtensionStateContext"
@@ -89,24 +89,6 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 		}
 	}, [task.text, windowWidth])
 
-	const toggleExpand = () => setIsExpanded(!isExpanded)
-
-	const handleDownload = () => {
-		vscode.postMessage({ type: "exportCurrentTask" })
-	}
-
-	const ExportButton = () => (
-		<VSCodeButton
-			appearance="icon"
-			onClick={handleDownload}
-			style={{
-				marginBottom: "-2px",
-				marginRight: "-2.5px",
-			}}>
-			<div style={{ fontSize: "10.5px", fontWeight: "bold", opacity: 0.6 }}>EXPORT</div>
-		</VSCodeButton>
-	)
-
 	return (
 		<div style={{ padding: "10px 13px 10px 13px" }}>
 			<div
@@ -182,7 +164,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 									paddingLeft: 3,
 									backgroundColor: "var(--vscode-badge-background)",
 								}}
-								onClick={toggleExpand}>
+								onClick={() => setIsExpanded(!isExpanded)}>
 								See more
 							</div>
 						</div>
@@ -197,7 +179,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 							textAlign: "right",
 							paddingRight: 0,
 						}}
-						onClick={toggleExpand}>
+						onClick={() => setIsExpanded(!isExpanded)}>
 						See less
 					</div>
 				)}
@@ -298,4 +280,16 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 	)
 }
 
-export default TaskHeader
+const ExportButton = () => (
+	<VSCodeButton
+		appearance="icon"
+		onClick={() => vscode.postMessage({ type: "exportCurrentTask" })}
+		style={{
+			marginBottom: "-2px",
+			marginRight: "-2.5px",
+		}}>
+		<div style={{ fontSize: "10.5px", fontWeight: "bold", opacity: 0.6 }}>EXPORT</div>
+	</VSCodeButton>
+)
+
+export default memo(TaskHeader)