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(