From 1f77dc3f664ae80fb3ebc5221253aa806e1d8d7b Mon Sep 17 00:00:00 2001
From: Rohit <rohit.rajan031101@gmail.com>
Date: Thu, 27 Mar 2025 00:25:27 +0530
Subject: [PATCH] feat: memoize highlighter component

---
 src/components/recorder/Highlighter.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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;