From 34cc8e8d562750e69715f384cde04dff0861a8e7 Mon Sep 17 00:00:00 2001
From: nicholas-codecov <nicholas.deschenes@sentry.io>
Date: Tue, 13 Aug 2024 15:29:59 -0600
Subject: [PATCH] memo'ize the Highlight component so it doesn't re-render when
 we update the URL with the line hash

---
 .../VirtualFileRenderer.tsx                   | 57 +++++++++++++------
 1 file changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/ui/VirtualFileRenderer/VirtualFileRenderer.tsx b/src/ui/VirtualFileRenderer/VirtualFileRenderer.tsx
index 4f1bf39b34..8bbf79c443 100644
--- a/src/ui/VirtualFileRenderer/VirtualFileRenderer.tsx
+++ b/src/ui/VirtualFileRenderer/VirtualFileRenderer.tsx
@@ -19,7 +19,7 @@ import { useWindowVirtualizer } from '@tanstack/react-virtual'
 import { Dictionary } from 'lodash'
 import isNaN from 'lodash/isNaN'
 import Highlight, { defaultProps } from 'prism-react-renderer'
-import { useLayoutEffect, useRef, useState } from 'react'
+import { memo, useLayoutEffect, useRef, useState } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 
 import { requestAnimationTimeout } from 'shared/utils/animationFrameUtils'
@@ -205,7 +205,40 @@ const CodeBody = ({
   )
 }
 
-CodeBody.displayName = 'CodeBody'
+interface MemoedHighlightProps {
+  code: string
+  fileType: string
+  coverage?: Dictionary<'H' | 'M' | 'P'>
+  codeDisplayOverlayRef: React.RefObject<HTMLDivElement>
+}
+
+const MemoedHighlight = memo(
+  ({
+    code,
+    coverage,
+    fileType,
+    codeDisplayOverlayRef,
+  }: MemoedHighlightProps) => (
+    <Highlight
+      {...defaultProps}
+      code={code}
+      theme={undefined}
+      language={prismLanguageMapper(fileType)}
+    >
+      {({ tokens, getLineProps, getTokenProps }) => (
+        <CodeBody
+          tokens={tokens}
+          coverage={coverage}
+          getLineProps={getLineProps}
+          getTokenProps={getTokenProps}
+          codeDisplayOverlayRef={codeDisplayOverlayRef}
+        />
+      )}
+    </Highlight>
+  )
+)
+
+MemoedHighlight.displayName = 'MemoedHighlight'
 
 interface VirtualFileRendererProps {
   code: string
@@ -362,22 +395,12 @@ export function VirtualFileRenderer({
         }}
       >
         <div ref={widthDivRef} className="w-full">
-          <Highlight
-            {...defaultProps}
+          <MemoedHighlight
             code={code}
-            theme={undefined}
-            language={prismLanguageMapper(fileType)}
-          >
-            {({ tokens, getLineProps, getTokenProps }) => (
-              <CodeBody
-                tokens={tokens}
-                coverage={coverage}
-                getLineProps={getLineProps}
-                getTokenProps={getTokenProps}
-                codeDisplayOverlayRef={codeDisplayOverlayRef}
-              />
-            )}
-          </Highlight>
+            fileType={fileType}
+            coverage={coverage}
+            codeDisplayOverlayRef={codeDisplayOverlayRef}
+          />
         </div>
       </div>
     </div>