perf(app): optimize loading times by using stored values of subplebbits and comments instead of fetching them multiple times

src/components/comment-content/comment-content.tsx

@@ -1,6 +1,7 @@
 import { Fragment, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
+import { Comment } from '@plebbit/plebbit-react-hooks';
 import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isPostPageView } from '../../lib/utils/view-utils';
 import useIsMobile from '../../hooks/use-is-mobile';
@@ -9,11 +10,10 @@ import LoadingEllipsis from '../../components/loading-ellipsis';
 import ReplyQuotePreview from '../../components/reply-quote-preview';
 import Markdown from '../../components/markdown';
 import Tooltip from '../../components/tooltip';
-import { Comment, useComment } from '@plebbit/plebbit-react-hooks';
 import styles from '../../views/post/post.module.css';
 import _ from 'lodash';
 
-const CommentContent = ({ comment: post }: { comment: Comment }) => {
+const CommentContent = ({ comment: post, replies }: { comment: Comment; replies: Comment[] }) => {
   const { t } = useTranslation();
   const params = useParams();
   const location = useLocation();
@@ -34,9 +34,10 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => {
       ? content.slice(0, 2000)
       : content);
 
-  const quotelinkReply = useComment({ commentCid: parentCid });
-  const isReply = parentCid;
-  const isReplyingToReply = (postCid && postCid !== parentCid) || quotelinkReply?.postCid !== parentCid;
+  const quotelinkReply = parentCid && replies?.find((reply) => reply.cid === parentCid);
+
+  const isReply = !!parentCid;
+  const isReplyingToReply = isReply && parentCid !== postCid;
 
   const stateString = useStateString(post);
 
@@ -44,7 +45,9 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => {
 
   return (
     <blockquote className={`${styles.postMessage} ${!isReply && isMobile && styles.clampLines} ${isRules && styles.rulesMessage}`}>
-      {isReply && state !== 'failed' && isReplyingToReply && !(deleted || removed) && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
+      {isReply && state !== 'failed' && isReplyingToReply && !(deleted || removed) && (
+        <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} replies={replies} />
+      )}
       {removed ? (
         reason ? (
           <>

src/components/post-desktop/post-desktop.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
-import { Comment, useAuthorAvatar, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAuthorAvatar, useEditedComment } from '@plebbit/plebbit-react-hooks';
+import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../../views/post/post.module.css';
 import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail, getMediaDimensions } from '../../lib/utils/media-utils';
@@ -47,7 +48,7 @@ const useShowOmittedReplies = create<ShowOmittedRepliesState>((set) => ({
     })),
 }));
 
-const PostInfo = ({ post, postReplyCount = 0, roles, isHidden }: PostProps) => {
+const PostInfo = ({ post, postReplyCount = 0, roles, isHidden, replies: threadReplies }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, deleted, locked, pinned, parentCid, postCid, reason, removed, shortCid, state, subplebbitAddress, timestamp } = post || {};
   const title = post?.title?.trim();
@@ -218,7 +219,7 @@ const PostInfo = ({ post, postReplyCount = 0, roles, isHidden }: PostProps) => {
             (reply: Comment, index: number) =>
               reply?.parentCid === cid &&
               reply?.cid &&
-              !(reply?.deleted || reply?.removed) && <ReplyQuotePreview key={index} isBacklinkReply={true} backlinkReply={reply} />,
+              !(reply?.deleted || reply?.removed) && <ReplyQuotePreview key={index} isBacklinkReply={true} backlinkReply={reply} replies={threadReplies} />,
           )}
       </span>
     </div>
@@ -305,7 +306,7 @@ const PostMedia = ({ commentMediaInfo, hasThumbnail, isDescription, isRules, spo
   );
 };
 
-const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
+const Reply = ({ postReplyCount, reply, roles, replies }: PostProps) => {
   let post = reply;
   // handle pending mod or author edit
   const { editedComment } = useEditedComment({ comment: reply });
@@ -326,7 +327,7 @@ const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
     <div className={styles.replyDesktop}>
       <div className={styles.sideArrows}>{'>>'}</div>
       <div className={`${styles.reply} ${isRouteLinkToReply && styles.highlight}`} data-cid={cid} data-author-address={author?.shortAddress} data-post-cid={postCid}>
-        <PostInfo post={post} postReplyCount={postReplyCount} roles={roles} isHidden={hidden} />
+        <PostInfo post={post} postReplyCount={postReplyCount} roles={roles} isHidden={hidden} replies={replies} />
         {link && !hidden && !(deleted || removed) && isValidURL(link) && (
           <PostMedia
             commentMediaInfo={commentMediaInfo}
@@ -341,13 +342,13 @@ const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
             parentCid={parentCid}
           />
         )}
-        {!hidden && (!(removed || deleted) || ((removed || deleted) && reason)) && <CommentContent comment={post} />}
+        {!hidden && (!(removed || deleted) || ((removed || deleted) && reason)) && <CommentContent comment={post} replies={replies || []} />}
       </div>
     </div>
   );
 };
 
-const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostProps) => {
+const PostDesktop = ({ post, roles, showAllReplies, showReplies = true, replies: threadReplies }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, content, deleted, link, linkHeight, linkWidth, pinned, postCid, removed, spoiler, state, subplebbitAddress, thumbnailUrl, parentCid } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
@@ -359,7 +360,8 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
   const { hidden, unhide, hide } = useHide({ cid });
   const isHidden = hidden && !isInPostPageView;
 
-  const replies = useReplies(post);
+  const commentReplies = useReplies(post);
+  const replies = threadReplies || commentReplies;
   const visiblelinksCount = useCountLinksInReplies(post, 5);
   const totalLinksCount = useCountLinksInReplies(post);
   const replyCount = replies?.length;
@@ -370,7 +372,7 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
 
   const stateString = useStateString(post) || t('loading_board');
 
-  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]);
 
   const subplebbitRulesReply = {
     isRules: true,
@@ -415,9 +417,9 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
               parentCid={parentCid}
             />
           )}
-          <PostInfo isHidden={hidden} post={post} postReplyCount={replyCount} roles={roles} />
+          <PostInfo isHidden={hidden} post={post} postReplyCount={replyCount} roles={roles} replies={replies} />
           {!isHidden && !content && !(deleted || removed) && <div className={styles.spacer} />}
-          {!isHidden && <CommentContent comment={post} />}
+          {!isHidden && <CommentContent comment={post} replies={replies} />}
         </div>
         {!isHidden && !isDescription && !isRules && !isInPendingPostView && (replyCount > 5 || (pinned && repliesCount > 0)) && !isInPostPageView && (
           <span className={styles.summary}>
@@ -446,7 +448,7 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
           showReplies &&
           (showAllReplies || showOmittedReplies[cid] ? replies : replies.slice(-5)).map((reply, index) => (
             <div key={index} className={styles.replyContainer}>
-              <Reply reply={reply} roles={roles} postReplyCount={replyCount} />
+              <Reply reply={reply} roles={roles} postReplyCount={replyCount} replies={replies} />
             </div>
           ))}
         {isDescription && subplebbit?.rules && subplebbit?.rules.length > 0 && (

src/components/post-mobile/post-mobile.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
-import { Comment, useAuthorAvatar, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAuthorAvatar, useEditedComment } from '@plebbit/plebbit-react-hooks';
+import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../../views/post/post.module.css';
 import { shouldShowSnow } from '../../lib/snow';
@@ -232,7 +233,7 @@ const PostMediaContent = ({ post, link }: { post: any; link: string }) => {
   );
 };
 
-const ReplyBacklinks = ({ post }: PostProps) => {
+const ReplyBacklinks = ({ post, replies: threadReplies }: PostProps) => {
   const { cid, parentCid } = post || {};
   const replies = useReplies(post);
 
@@ -245,14 +246,14 @@ const ReplyBacklinks = ({ post }: PostProps) => {
           (reply: Comment, index: number) =>
             reply?.parentCid === cid &&
             reply?.cid &&
-            !(reply?.deleted || reply?.removed) && <ReplyQuotePreview key={index} isBacklinkReply={true} backlinkReply={reply} />,
+            !(reply?.deleted || reply?.removed) && <ReplyQuotePreview key={index} isBacklinkReply={true} backlinkReply={reply} replies={threadReplies} />,
         )}
       </div>
     )
   );
 };
 
-const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
+const Reply = ({ postReplyCount, reply, replies, roles }: PostProps) => {
   let post = reply;
   // handle pending mod or author edit
   const { editedComment } = useEditedComment({ comment: reply });
@@ -273,7 +274,7 @@ const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
           data-post-cid={postCid}
         >
           <PostInfoAndMedia post={post} postReplyCount={postReplyCount} roles={roles} />
-          {!hidden && (!(removed || deleted) || ((removed || deleted) && reason)) && <CommentContent comment={post} />}
+          {!hidden && (!(removed || deleted) || ((removed || deleted) && reason)) && <CommentContent comment={post} replies={replies || []} />}
           <ReplyBacklinks post={reply} />
         </div>
       </div>
@@ -281,7 +282,7 @@ const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
   );
 };
 
-const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostProps) => {
+const PostMobile = ({ post, roles, showAllReplies, showReplies = true, replies: threadReplies }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, pinned, postCid, replyCount, state, subplebbitAddress } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
@@ -291,14 +292,15 @@ const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostPro
   const isInPendingPostView = isPendingPostView(location.pathname, params);
   const isInPostView = isPostPageView(location.pathname, params);
   const linksCount = useCountLinksInReplies(post);
-  const replies = useReplies(post);
+  const commentReplies = useReplies(post);
+  const replies = threadReplies || commentReplies;
 
   const isInPostPageView = isPostPageView(location.pathname, params);
   const { hidden, unhide } = useHide({ cid });
 
   const stateString = useStateString(post) || t('loading_post');
 
-  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]);
   const showRules = isDescription && subplebbit?.rules && subplebbit?.rules.length > 0;
   const subplebbitRulesReply = {
     isRules: true,
@@ -337,7 +339,7 @@ const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostPro
               >
                 {shouldShowSnow() && <img src={`${process.env.PUBLIC_URL}/assets/xmashat.gif`} className={styles.xmasHat} alt='' />}
                 <PostInfoAndMedia post={post} postReplyCount={replyCount} roles={roles} />
-                <CommentContent comment={post} />
+                <CommentContent comment={post} replies={replies} />
               </div>
               {!isInPostView && !isInPendingPostView && showReplies && (
                 <div className={styles.postLink}>
@@ -360,7 +362,7 @@ const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostPro
               showReplies &&
               (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
                 <div key={index} className={styles.replyContainer}>
-                  <Reply postReplyCount={replyCount} reply={reply} roles={roles} />
+                  <Reply postReplyCount={replyCount} reply={reply} roles={roles} replies={replies} />
                 </div>
               ))}
             {showRules && (

src/components/reply-quote-preview/reply-quote-preview.tsx

@@ -13,6 +13,7 @@ interface ReplyQuotePreviewProps {
   backlinkReply?: Comment;
   isQuotelinkReply?: boolean;
   quotelinkReply?: Comment;
+  replies?: Comment[];
 }
 
 const handleQuoteHover = (cid: string, onElementOutOfView: () => void) => {
@@ -53,7 +54,7 @@ const handleQuoteHover = (cid: string, onElementOutOfView: () => void) => {
   }
 };
 
-const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply }: ReplyQuotePreviewProps) => {
+const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply, replies }: ReplyQuotePreviewProps) => {
   const [hoveredCid, setHoveredCid] = useState<string | null>(null);
   const [outOfViewCid, setOutOfViewCid] = useState<string | null>(null);
   const placementRef = useRef<Placement>('right');
@@ -144,7 +145,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
         outOfViewCid === backlinkReply?.cid &&
         createPortal(
           <div className={styles.replyQuotePreview} ref={refs.setFloating} style={floatingStyles}>
-            <Post post={backlinkReply} showReplies={false} />
+            <Post post={backlinkReply} showReplies={false} replies={replies} />
           </div>,
           document.body,
         )}
@@ -173,7 +174,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
         outOfViewCid === quotelinkReply?.cid &&
         createPortal(
           <div className={styles.replyQuotePreview} ref={refs.setFloating} style={floatingStyles}>
-            <Post post={quotelinkReply} showReplies={false} />
+            <Post post={quotelinkReply} showReplies={false} replies={replies} />
           </div>,
           document.body,
         )}
@@ -183,7 +184,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
   return isBacklinkReply ? replyBacklink : isQuotelinkReply && replyQuotelink;
 };
 
-const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply }: ReplyQuotePreviewProps) => {
+const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply, replies }: ReplyQuotePreviewProps) => {
   const [hoveredCid, setHoveredCid] = useState<string | null>(null);
   const [outOfViewCid, setOutOfViewCid] = useState<string | null>(null);
 
@@ -256,7 +257,7 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
         outOfViewCid === backlinkReply?.cid &&
         createPortal(
           <div className={styles.replyQuotePreview} ref={refs.setFloating} style={floatingStyles}>
-            <Post post={backlinkReply} showReplies={false} />
+            <Post post={backlinkReply} showReplies={false} replies={replies} />
           </div>,
           document.body,
         )}
@@ -292,7 +293,7 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
         outOfViewCid === quotelinkReply?.cid &&
         createPortal(
           <div className={styles.replyQuotePreview} ref={refs.setFloating} style={floatingStyles}>
-            <Post post={quotelinkReply} showReplies={false} />
+            <Post post={quotelinkReply} showReplies={false} replies={replies} />
           </div>,
           document.body,
         )}
@@ -302,13 +303,25 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
   return isBacklinkReply ? replyBacklink : isQuotelinkReply && replyQuotelink;
 };
 
-const ReplyQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply }: ReplyQuotePreviewProps) => {
+const ReplyQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply, replies }: ReplyQuotePreviewProps) => {
   const isMobile = useIsMobile();
 
   return isMobile ? (
-    <MobileQuotePreview backlinkReply={backlinkReply} quotelinkReply={quotelinkReply} isBacklinkReply={isBacklinkReply} isQuotelinkReply={isQuotelinkReply} />
+    <MobileQuotePreview
+      backlinkReply={backlinkReply}
+      quotelinkReply={quotelinkReply}
+      isBacklinkReply={isBacklinkReply}
+      isQuotelinkReply={isQuotelinkReply}
+      replies={replies}
+    />
   ) : (
-    <DesktopQuotePreview backlinkReply={backlinkReply} quotelinkReply={quotelinkReply} isBacklinkReply={isBacklinkReply} isQuotelinkReply={isQuotelinkReply} />
+    <DesktopQuotePreview
+      backlinkReply={backlinkReply}
+      quotelinkReply={quotelinkReply}
+      isBacklinkReply={isBacklinkReply}
+      isQuotelinkReply={isQuotelinkReply}
+      replies={replies}
+    />
   );
 };