From 754cf08c75e4b26566554eb057e8a6d962c3fee8 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Tue, 31 Oct 2023 21:10:38 +0100
Subject: [PATCH] perf(thumbnail): memoize commentMediaInfo call

---
 src/components/post/thumbnail/thumbnail.tsx | 57 ++++++++++++---------
 1 file changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/components/post/thumbnail/thumbnail.tsx b/src/components/post/thumbnail/thumbnail.tsx
index 89c1e6ae..53c93c14 100644
--- a/src/components/post/thumbnail/thumbnail.tsx
+++ b/src/components/post/thumbnail/thumbnail.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import styles from './thumbnail.module.css';
 import { Link } from 'react-router-dom';
 import { CommentMediaInfo } from '../../../lib/utils';
@@ -16,33 +16,40 @@ interface ThumbnailProps {
 }
 
 const Thumbnail: FC<ThumbnailProps> = ({ cid, commentMediaInfo, expanded = false, isReply = false, link, linkHeight, linkWidth, subplebbitAddress, toggleExpanded }) => {
+
   const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail;
-  let displayWidth, displayHeight, hasLinkDimensions;
+  
+  const { displayWidth, displayHeight, hasLinkDimensions } = useMemo(() => {
+    let dw, dh, hld;
+    if (linkWidth && linkHeight) {
+      let scale = Math.min(1, 70 / Math.max(linkWidth, linkHeight));
+      dw = `${linkWidth * scale}px`;
+      dh = `${linkHeight * scale}px`;
+      hld = true;
+    } else {
+      dw = '70px';
+      dh = '70px';
+      hld = false;
+    }
+    return { displayWidth: dw, displayHeight: dh, hasLinkDimensions: hld };
+  }, [linkWidth, linkHeight]);
+
+  const mediaComponent = useMemo(() => {
+    let component = null;
+    if (commentMediaInfo?.type === 'image') {
+      component = <img src={commentMediaInfo.url} alt='' />;
+    } else if (commentMediaInfo?.type === 'video') {
+      component = commentMediaInfo.thumbnail ? <img src={commentMediaInfo.thumbnail} alt='' /> : <video src={commentMediaInfo.url} />;
+    } else if (commentMediaInfo?.type === 'webpage') {
+      component = <img src={commentMediaInfo.thumbnail} alt='' />;
+    } else if (commentMediaInfo?.type === 'iframe') {
+      component = iframeThumbnail ? <img src={iframeThumbnail} alt='' /> : null;
+    }
+    return component;
+  }, [commentMediaInfo, iframeThumbnail]);
+
   const routeOrLink = isReply ? link : `/p/${subplebbitAddress}/c/${cid}`;
 
-  if (linkWidth && linkHeight) {
-    let scale = Math.min(1, 70 / Math.max(linkWidth, linkHeight));
-    displayWidth = `${linkWidth * scale}px`;
-    displayHeight = `${linkHeight * scale}px`;
-    hasLinkDimensions = true;
-  } else {
-    displayWidth = '70px';
-    displayHeight = '70px';
-    hasLinkDimensions = false;
-  }
-
-  let mediaComponent = null;
-
-  if (commentMediaInfo?.type === 'image') {
-    mediaComponent = <img src={commentMediaInfo.url} alt='' />;
-  } else if (commentMediaInfo?.type === 'video') {
-    mediaComponent = commentMediaInfo.thumbnail ? <img src={commentMediaInfo.thumbnail} alt='' /> : <video src={commentMediaInfo.url} />;
-  } else if (commentMediaInfo?.type === 'webpage') {
-    mediaComponent = <img src={commentMediaInfo.thumbnail} alt='' />;
-  } else if (commentMediaInfo?.type === 'iframe') {
-    mediaComponent = iframeThumbnail ? <img src={iframeThumbnail} alt='' /> : null;
-  }
-
   return (
     <span style={{ width: displayWidth, height: displayHeight, display: expanded ? 'none' : 'block' }} className={styles.thumbnail}>
       <span className={hasLinkDimensions ? styles.transparentThumbnailWrapper : styles.thumbnailWrapper}>