diff --git a/src/components/recorder/Highlighter.tsx b/src/components/recorder/Highlighter.tsx
index c76a7a82..a81c9b37 100644
--- a/src/components/recorder/Highlighter.tsx
+++ b/src/components/recorder/Highlighter.tsx
@@ -10,7 +10,7 @@ interface HighlighterProps {
   canvasRect: DOMRect;
 };
 
-export const Highlighter = ({ unmodifiedRect, displayedSelector = '', width, height, canvasRect }: HighlighterProps) => {
+const HighlighterComponent = ({ unmodifiedRect, displayedSelector = '', width, height, canvasRect }: HighlighterProps) => {
   if (!unmodifiedRect) {
     return null;
   } else {
@@ -47,6 +47,8 @@ export const Highlighter = ({ unmodifiedRect, displayedSelector = '', width, hei
   }
 }
 
+export const Highlighter = React.memo(HighlighterComponent);
+
 const HighlighterOutline = styled.div<HighlighterOutlineProps>`
   box-sizing: border-box;
   pointer-events: none !important;