Ensure that review panel components are memoized (#23194)

GitOrigin-RevId: 271b8b00394d6b87fddc503a70f17f8f41144ec7

services/web/frontend/js/features/review-panel-new/components/review-panel-change.tsx

@@ -26,8 +26,8 @@ export const ReviewPanelChange = memo<{
   docId: string
   hoverRanges?: boolean
   hovered?: boolean
-  onEnter?: () => void
-  onLeave?: () => void
+  onEnter?: (changeId: string) => void
+  onLeave?: (changeId: string) => void
 }>(
   ({
     change,
@@ -88,14 +88,14 @@ export const ReviewPanelChange = memo<{
         docId={docId}
         hoverRanges={hoverRanges}
         disabled={accepting}
-        onEnterEntryIndicator={onEnter}
-        onLeaveEntryIndicator={onLeave}
+        onEnterEntryIndicator={onEnter && (() => onEnter(change.id))}
+        onLeaveEntryIndicator={onLeave && (() => onLeave(change.id))}
         entryIndicator="edit"
       >
         <div
           className="review-panel-entry-content"
-          onMouseEnter={onEnter}
-          onMouseLeave={onLeave}
+          onMouseEnter={onEnter && (() => onEnter(change.id))}
+          onMouseLeave={onLeave && (() => onLeave(change.id))}
         >
           <div className="review-panel-entry-header">
             <div>

services/web/frontend/js/features/review-panel-new/components/review-panel-comment-content.tsx

@@ -21,8 +21,8 @@ export const ReviewPanelCommentContent = memo<{
   onDeleteMessage?: (commentId: CommentId) => Promise<void>
   onDeleteThread?: (threadId: ThreadId) => Promise<void>
   onResolve?: () => Promise<void>
-  onLeave?: () => void
-  onEnter?: () => void
+  onLeave?: (changeId: string) => void
+  onEnter?: (changeId: string) => void
 }>(
   ({
     comment,
@@ -55,8 +55,8 @@ export const ReviewPanelCommentContent = memo<{
     return (
       <div
         className="review-panel-entry-content"
-        onMouseEnter={onEnter}
-        onMouseLeave={onLeave}
+        onMouseEnter={onEnter && (() => onEnter(comment.id))}
+        onMouseLeave={onLeave && (() => onLeave(comment.id))}
       >
         {thread.messages.map((message, i) => {
           const isReply = i !== 0

services/web/frontend/js/features/review-panel-new/components/review-panel-comment.tsx

@@ -20,8 +20,8 @@ export const ReviewPanelComment = memo<{
   docId: string
   top?: number
   hoverRanges?: boolean
-  onEnter?: () => void
-  onLeave?: () => void
+  onEnter?: (changeId: string) => void
+  onLeave?: (changeId: string) => void
   hovered?: boolean
 }>(({ comment, top, hovered, onEnter, onLeave, docId, hoverRanges }) => {
   const threads = useThreadsContext()
@@ -142,8 +142,8 @@ export const ReviewPanelComment = memo<{
       position={comment.op.p}
       hoverRanges={hoverRanges}
       disabled={processing}
-      onEnterEntryIndicator={onEnter}
-      onLeaveEntryIndicator={onLeave}
+      onEnterEntryIndicator={onEnter && (() => onEnter(comment.id))}
+      onLeaveEntryIndicator={onLeave && (() => onLeave(comment.id))}
       entryIndicator="comment"
     >
       <ReviewPanelCommentContent

services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx

@@ -320,8 +320,8 @@ const ReviewPanelCurrentFile: FC = () => {
                 top={positions.get(change.id)}
                 aggregate={aggregatedRanges.aggregates.get(change.id)}
                 hovered={hoveredEntry === change.id}
-                onEnter={() => handleEntryEnter(change.id)}
-                onLeave={() => handleEntryLeave(change.id)}
+                onEnter={handleEntryEnter}
+                onLeave={handleEntryLeave}
               />
             )
         )}
@@ -335,8 +335,8 @@ const ReviewPanelCurrentFile: FC = () => {
                 comment={comment}
                 top={positions.get(comment.id)}
                 hovered={hoveredEntry === comment.id}
-                onEnter={() => handleEntryEnter(comment.id)}
-                onLeave={() => handleEntryLeave(comment.id)}
+                onEnter={handleEntryEnter}
+                onLeave={handleEntryLeave}
               />
             )
         )}