diff --git a/src/components/gridItems/ChatItem/ChatItem.tsx b/src/components/gridItems/ChatItem/ChatItem.tsx
index 4675d19..6417448 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,21 @@ interface ChatItemProps {
isDarkThemePreferred?: boolean;
}
-const ChatItem = ({ streamName, isDarkThemePreferred = false }: ChatItemProps) => {
- const title = `Chat: ${streamName}`;
+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 iframeSrc = useMemo(() => {
- const darkParam = isDarkThemePreferred ? '&darkpopout' : '';
- return `https://www.twitch.tv/embed/${streamName}/chat?parent=${window.location.hostname}${darkParam}`;
- }, [streamName, isDarkThemePreferred]);
-
- return (
-
-
-
- );
-};
+ return (
+
+
+
+ );
+ },
+ (prev, next) =>
+ prev.isDarkThemePreferred === next.isDarkThemePreferred &&
+ prev.streamName.toLowerCase() === next.streamName.toLowerCase()
+);
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(