From c3d8e8ade3ba34463b57d5fa8daee0c0b5ce9016 Mon Sep 17 00:00:00 2001
From: Quentin VERDIER <quent1.verdier@gmail.com>
Date: Wed, 17 Sep 2025 18:55:01 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20Optimize=20ChatItem=20and=20Str?=
 =?UTF-8?q?eamItem=20components:=20memoize=20components=20for=20performanc?=
 =?UTF-8?q?e=20improvements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/gridItems/ChatItem/ChatItem.tsx     | 12 ++++--------
 src/components/gridItems/GridItem/GridItem.tsx     |  1 +
 src/components/gridItems/StreamItem/StreamItem.tsx |  6 +++---
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/components/gridItems/ChatItem/ChatItem.tsx b/src/components/gridItems/ChatItem/ChatItem.tsx
index 4675d19..15d720c 100644
--- a/src/components/gridItems/ChatItem/ChatItem.tsx
+++ b/src/components/gridItems/ChatItem/ChatItem.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { memo } from 'react';
 import GridItem from '../GridItem/GridItem';
 import ChatItemHeader from './ChatItemHeader/ChatItemHeader';
 
@@ -7,20 +7,16 @@ interface ChatItemProps {
   isDarkThemePreferred?: boolean;
 }
 
-const ChatItem = ({ streamName, isDarkThemePreferred = false }: ChatItemProps) => {
+const ChatItem = memo(({ streamName, isDarkThemePreferred = false }: ChatItemProps) => {
   const title = `Chat: ${streamName}`;
-
-  const iframeSrc = useMemo(() => {
-    const darkParam = isDarkThemePreferred ? '&darkpopout' : '';
-    return `https://www.twitch.tv/embed/${streamName}/chat?parent=${window.location.hostname}${darkParam}`;
-  }, [streamName, isDarkThemePreferred]);
+  const iframeSrc = `https://www.twitch.tv/embed/${streamName}/chat?parent=${window.location.hostname}${isDarkThemePreferred ? '&darkpopout' : ''}`;
 
   return (
     <GridItem title={title} iframeSrc={iframeSrc} streamName={streamName}>
       <ChatItemHeader streamName={streamName} />
     </GridItem>
   );
-};
+});
 
 ChatItem.displayName = 'ChatItem';
 
diff --git a/src/components/gridItems/GridItem/GridItem.tsx b/src/components/gridItems/GridItem/GridItem.tsx
index 454b112..c13ce8e 100644
--- a/src/components/gridItems/GridItem/GridItem.tsx
+++ b/src/components/gridItems/GridItem/GridItem.tsx
@@ -32,6 +32,7 @@ const GridItem = memo(
           </GridItemHeader>
           <iframe
             ref={iframeRef}
+            key={iframeSrc}
             title={title}
             src={iframeSrc}
             height="100%"
diff --git a/src/components/gridItems/StreamItem/StreamItem.tsx b/src/components/gridItems/StreamItem/StreamItem.tsx
index cc105b0..7cdd381 100644
--- a/src/components/gridItems/StreamItem/StreamItem.tsx
+++ b/src/components/gridItems/StreamItem/StreamItem.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { memo, useCallback, useRef } from 'react';
 import GridItem, { type GridItemRef } from '../GridItem/GridItem';
 import StreamItemHeader from './StreamItemHeader/StreamItemHeader';
 
@@ -6,7 +6,7 @@ interface StreamItemProps {
   streamName: string;
 }
 
-const StreamItem = ({ streamName }: StreamItemProps) => {
+const StreamItem = memo(({ streamName }: StreamItemProps) => {
   const gridItemRef = useRef<GridItemRef>(null);
 
   const title = `Stream: ${streamName}`;
@@ -22,7 +22,7 @@ const StreamItem = ({ streamName }: StreamItemProps) => {
       <StreamItemHeader streamName={streamName} handleRefresh={handleRefresh} />
     </GridItem>
   );
-};
+});
 
 StreamItem.displayName = 'StreamItem';
 

From 964b3ad6468f5786793dd87ee09c5d06291157b1 Mon Sep 17 00:00:00 2001
From: Quentin VERDIER <quent1.verdier@gmail.com>
Date: Wed, 17 Sep 2025 19:55:12 +0200
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20Add=20custom=20props=20comparis?=
 =?UTF-8?q?on?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../gridItems/ChatItem/ChatItem.tsx           | 23 +++++++-----
 .../gridItems/StreamItem/StreamItem.tsx       | 37 ++++++++++---------
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/components/gridItems/ChatItem/ChatItem.tsx b/src/components/gridItems/ChatItem/ChatItem.tsx
index 15d720c..6417448 100644
--- a/src/components/gridItems/ChatItem/ChatItem.tsx
+++ b/src/components/gridItems/ChatItem/ChatItem.tsx
@@ -7,16 +7,21 @@ interface ChatItemProps {
   isDarkThemePreferred?: boolean;
 }
 
-const ChatItem = memo(({ streamName, isDarkThemePreferred = false }: ChatItemProps) => {
-  const title = `Chat: ${streamName}`;
-  const iframeSrc = `https://www.twitch.tv/embed/${streamName}/chat?parent=${window.location.hostname}${isDarkThemePreferred ? '&darkpopout' : ''}`;
+const ChatItem = memo(
+  ({ streamName, isDarkThemePreferred = false }: ChatItemProps) => {
+    const title = `Chat: ${streamName}`;
+    const iframeSrc = `https://www.twitch.tv/embed/${streamName}/chat?parent=${window.location.hostname}${isDarkThemePreferred ? '&darkpopout' : ''}`;
 
-  return (
-    <GridItem title={title} iframeSrc={iframeSrc} streamName={streamName}>
-      <ChatItemHeader streamName={streamName} />
-    </GridItem>
-  );
-});
+    return (
+      <GridItem title={title} iframeSrc={iframeSrc} streamName={streamName}>
+        <ChatItemHeader streamName={streamName} />
+      </GridItem>
+    );
+  },
+  (prev, next) =>
+    prev.isDarkThemePreferred === next.isDarkThemePreferred &&
+    prev.streamName.toLowerCase() === next.streamName.toLowerCase()
+);
 
 ChatItem.displayName = 'ChatItem';
 
diff --git a/src/components/gridItems/StreamItem/StreamItem.tsx b/src/components/gridItems/StreamItem/StreamItem.tsx
index 7cdd381..5e8627f 100644
--- a/src/components/gridItems/StreamItem/StreamItem.tsx
+++ b/src/components/gridItems/StreamItem/StreamItem.tsx
@@ -6,23 +6,26 @@ interface StreamItemProps {
   streamName: string;
 }
 
-const StreamItem = memo(({ streamName }: StreamItemProps) => {
-  const gridItemRef = useRef<GridItemRef>(null);
-
-  const title = `Stream: ${streamName}`;
-
-  const iframeSrc = `https://player.twitch.tv/?channel=${streamName}&parent=${window.location.hostname}`;
-
-  const handleRefresh = useCallback(() => {
-    gridItemRef.current?.refreshIframe();
-  }, []);
-
-  return (
-    <GridItem ref={gridItemRef} title={title} iframeSrc={iframeSrc} allowFullScreen streamName={streamName}>
-      <StreamItemHeader streamName={streamName} handleRefresh={handleRefresh} />
-    </GridItem>
-  );
-});
+const StreamItem = memo(
+  ({ streamName }: StreamItemProps) => {
+    const gridItemRef = useRef<GridItemRef>(null);
+
+    const title = `Stream: ${streamName}`;
+
+    const iframeSrc = `https://player.twitch.tv/?channel=${streamName}&parent=${window.location.hostname}`;
+
+    const handleRefresh = useCallback(() => {
+      gridItemRef.current?.refreshIframe();
+    }, []);
+
+    return (
+      <GridItem ref={gridItemRef} title={title} iframeSrc={iframeSrc} allowFullScreen streamName={streamName}>
+        <StreamItemHeader streamName={streamName} handleRefresh={handleRefresh} />
+      </GridItem>
+    );
+  },
+  (prev, next) => prev.streamName.toLowerCase() === next.streamName.toLowerCase()
+);
 
 StreamItem.displayName = 'StreamItem';