perf: eliminate redundant derived state in board and post views

src/hooks/use-comment-media-info.ts

@@ -1,42 +1,56 @@
-import { useCallback, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
-import { getCommentMediaInfo, fetchWebpageThumbnailIfNeeded } from '../lib/utils/media-utils';
+import { getCommentMediaInfo, fetchWebpageThumbnailIfNeeded, CommentMediaInfo } from '../lib/utils/media-utils';
 import { isPendingPostView, isPostPageView } from '../lib/utils/view-utils';
 
-export const useCommentMediaInfo = (link: string, thumbnailUrl: string, linkWidth: number, linkHeight: number) => {
+/**
+ * Hook to fetch and cache media info with thumbnail dimensions for comments.
+ * Properly tracks thumbnail dimensions using state so they're available after the image loads.
+ */
+export const useCommentMediaInfo = (link: string, thumbnailUrl: string, linkWidth: number, linkHeight: number): CommentMediaInfo | undefined => {
   const location = useLocation();
   const params = useParams();
   const isInPostPageView = isPostPageView(location.pathname, params);
   const isInPendingPostView = isPendingPostView(location.pathname, params);
 
-  // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
+  const [thumbnailDimensions, setThumbnailDimensions] = useState<{ width: number; height: number } | null>(null);
-  const fetchThumbnail = useCallback(async () => {
+
-    let commentMediaInfo = getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
+  // Fetch and cache thumbnail dimensions for webpage media
-    if (commentMediaInfo?.type === 'webpage' && !commentMediaInfo.thumbnail) {
+  useEffect(() => {
-      const newMediaInfo = await fetchWebpageThumbnailIfNeeded(commentMediaInfo);
+    if (!(isInPostPageView || isInPendingPostView)) return;
-      // Fetch the dimensions of the thumbnail
+
+    const fetchAndCacheThumbnail = async () => {
+      const mediaInfo = getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
+
+      if (mediaInfo?.type === 'webpage' && !mediaInfo.thumbnail) {
+        const newMediaInfo = await fetchWebpageThumbnailIfNeeded(mediaInfo);
+
         if (newMediaInfo.thumbnail) {
           const img = new Image();
           img.onload = () => {
-          commentMediaInfo = {
+            setThumbnailDimensions({ width: img.width, height: img.height });
-            ...newMediaInfo,
-            thumbnailWidth: img.width,
-            thumbnailHeight: img.height,
           };
+          img.onerror = () => {
+            // Silently handle failed image loads
           };
           img.src = newMediaInfo.thumbnail;
         }
-      commentMediaInfo = newMediaInfo;
       }
-    return commentMediaInfo;
+    };
-  }, [link, thumbnailUrl, linkWidth, linkHeight]);
 
-  useEffect(() => {
+    fetchAndCacheThumbnail();
-    // don't fetch in feed view, it displaces the posts
+  }, [link, thumbnailUrl, linkWidth, linkHeight, isInPostPageView, isInPendingPostView]);
-    if (isInPostPageView && isInPendingPostView) {
+
-      fetchThumbnail();
+  const mediaInfo = getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
+
+  // Return media info with cached thumbnail dimensions if available
+  if (thumbnailDimensions && mediaInfo) {
+    return {
+      ...mediaInfo,
+      thumbnailWidth: thumbnailDimensions.width,
+      thumbnailHeight: thumbnailDimensions.height,
+    };
   }
-  }, [fetchThumbnail, isInPostPageView, isInPendingPostView]);
 
-  return getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
+  return mediaInfo;
 };

src/views/board/board.tsx

@@ -269,15 +269,7 @@ const Board = () => {
     document.title = boardTitle + ' - plebchan';
   }, [title, shortAddress, subplebbitAddress]);
 
-  // probably not necessary to show the error to the user if the feed loaded successfully
+  const shouldShowErrorToUser = error?.message && feed.length === 0;
-  const [shouldShowErrorToUser, setShouldShowErrorToUser] = useState(false);
-  useEffect(() => {
-    if (error?.message && feed.length === 0) {
-      setShouldShowErrorToUser(true);
-    } else if (feed.length > 0) {
-      setShouldShowErrorToUser(false);
-    }
-  }, [error, feed]);
 
   return (
     <>

src/views/catalog/catalog.tsx

@@ -462,7 +462,7 @@ const Catalog = () => {
   }, [clearMatchedFilters, subplebbitAddress]);
 
   // Apply filter colors to posts when feed changes
-  useEffect(() => {
+  const coloredFeed = useMemo(() => {
     if (combinedFeed.length > 0 && filterItems.length > 0) {
       // Clear existing matched filters
       clearMatchedFilters();
@@ -482,6 +482,7 @@ const Catalog = () => {
         }
       });
     }
+    return combinedFeed;
   }, [combinedFeed, filterItems, clearMatchedFilters]);
 
   return (

src/views/post/post.tsx

@@ -85,14 +85,7 @@ const PostPage = () => {
   }, [title, shortAddress, subplebbitAddress, post?.title, post?.content, isInAllView, t]);
 
   // probably not necessary to show the error to the user if the post loaded successfully
-  const [shouldShowErrorToUser, setShouldShowErrorToUser] = useState(false);
+  const shouldShowErrorToUser = post?.error && ((post?.replyCount > 0 && post?.replies?.length === 0) || (post?.state === 'failed' && post?.error));
-  useEffect(() => {
-    if (post?.error && ((post?.replyCount > 0 && post?.replies?.length === 0) || (post?.state === 'failed' && post?.error))) {
-      setShouldShowErrorToUser(true);
-    } else if (post?.replyCount > 0 && post?.replies?.length > 0) {
-      setShouldShowErrorToUser(false);
-    }
-  }, [post]);
 
   return (
     <div className={styles.content}>