From dcb05ed3a04212b5e140ed42fa0e4bbed810781e Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Thu, 6 Mar 2025 13:15:33 +0100 Subject: [PATCH] perf: prioritize cached data from API, improving navigation speed and memory consumption --- src/components/board-buttons/board-buttons.tsx | 9 ++++++--- src/components/board-header/board-header.tsx | 6 ++++-- src/components/post-form/post-form.tsx | 13 ++++++++----- src/components/reply-modal/reply-modal.tsx | 8 +++++--- .../subplebbit-stats/subplebbit-stats.tsx | 8 +++++--- src/views/post/post.tsx | 4 ++-- 6 files changed, 30 insertions(+), 18 deletions(-) diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index d64121ae..073a504d 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -1,6 +1,8 @@ import { useTranslation } from 'react-i18next'; import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'; -import { useAccountComment, useComment, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks'; +import { useAccountComment, useSubscribe } from '@plebbit/plebbit-react-hooks'; +import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits'; +import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages'; import { isAllView, isCatalogView, isDescriptionView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils'; import useCatalogStyleStore from '../../stores/use-catalog-style-store'; import useFeedResetStore from '../../stores/use-feed-reset-store'; @@ -297,8 +299,9 @@ const PostPageStats = () => { const location = useLocation(); const isInDescriptionView = isDescriptionView(location.pathname, params); - const comment = useComment({ commentCid: params?.commentCid }); - const subplebbit = useSubplebbit({ subplebbitAddress: params?.subplebbitAddress }); + const comment = useSubplebbitsPagesStore((state) => state.comments[params?.commentCid as string]); + const subplebbit = useSubplebbitsStore((state) => state.subplebbits[params?.subplebbitAddress as string]); + const descriptionReplyCount = location?.pathname.startsWith('/p/all/') ? 0 : subplebbit?.rules?.length > 0 ? 1 : 0; const { closed, pinned, replyCount } = comment || {}; const linkCount = useCountLinksInReplies(comment); diff --git a/src/components/board-header/board-header.tsx b/src/components/board-header/board-header.tsx index 071511d4..3d5d5ef5 100644 --- a/src/components/board-header/board-header.tsx +++ b/src/components/board-header/board-header.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { useLocation, useParams } from 'react-router-dom'; -import { useAccountComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { useAccountComment } from '@plebbit/plebbit-react-hooks'; +import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits'; import { isAllView, isSubscriptionsView, isModView } from '../../lib/utils/view-utils'; import styles from './board-header.module.css'; import { useMultisubMetadata } from '../../hooks/use-default-subplebbits'; @@ -29,7 +30,8 @@ const BoardHeader = () => { const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; - const subplebbit = useSubplebbit({ subplebbitAddress }); + const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]); + const { address, shortAddress } = subplebbit || {}; const multisubMetadata = useMultisubMetadata(); diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index e02b00a8..1d107805 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -1,7 +1,9 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; -import { Comment, setAccount, useAccount, useAccountComment, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { Comment, setAccount, useAccount, useAccountComment, useEditedComment } from '@plebbit/plebbit-react-hooks'; +import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits'; +import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages'; import { getHasThumbnail, getLinkMediaInfo } from '../../lib/utils/media-utils'; import { formatMarkdown } from '../../lib/utils/post-utils'; import { isValidURL } from '../../lib/utils/url-utils'; @@ -56,7 +58,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid: const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses(); const { anonMode, getNewSigner, getExistingSigner } = useAnonMode(postCid); - const comment = useComment({ commentCid: postCid }); + const comment = useSubplebbitsPagesStore((state) => state.comments[postCid]); const address = comment?.author?.address; const [lengthError, setLengthError] = useState(null); @@ -427,9 +429,10 @@ const PostForm = () => { const isInPostView = isPostPageView(location.pathname, params); const isInRulesView = isRulesView(location.pathname, params); const isInAllView = isAllView(location.pathname); - const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams()); + const isInSubscriptionsView = isSubscriptionsView(location.pathname, params); - const post = useComment({ commentCid: useParams().commentCid }); + const commentCid = params?.commentCid; + const post = useSubplebbitsPagesStore((state) => state.comments[commentCid as string]); let comment: Comment = post; // handle pending mod or author edit const { editedComment } = useEditedComment({ comment }); @@ -444,7 +447,7 @@ const PostForm = () => { const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; - const subplebbit = useSubplebbit({ subplebbitAddress }); + const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]); const { isOffline, isOnlineStatusLoading, offlineTitle } = useIsSubplebbitOffline(subplebbit); return ( diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx index 79a9cb35..5f29ab27 100644 --- a/src/components/reply-modal/reply-modal.tsx +++ b/src/components/reply-modal/reply-modal.tsx @@ -1,7 +1,9 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { useLocation, useParams } from 'react-router-dom'; import { Trans, useTranslation } from 'react-i18next'; -import { setAccount, useAccount, useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { setAccount, useAccount } from '@plebbit/plebbit-react-hooks'; +import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits'; +import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import { formatMarkdown } from '../../lib/utils/post-utils'; import { getFormattedTimeAgo } from '../../lib/utils/time-utils'; @@ -45,7 +47,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s const { selectedText } = useSelectedTextStore(); const { anonMode, getNewSigner, getExistingSigner } = useAnonMode(postCid); - const comment = useComment({ commentCid: postCid }); + const comment = useSubplebbitsPagesStore((state) => state.comments[postCid]); const address = comment?.author?.address; const getAnonAddressForReply = useCallback(async () => { @@ -189,7 +191,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s const location = useLocation(); const isInAllView = isAllView(location.pathname); const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams()); - const subplebbit = useSubplebbit({ subplebbitAddress }); + const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]); const { updatedAt } = subplebbit || {}; const isBoardOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60; const offlineAlert = updatedAt diff --git a/src/components/subplebbit-stats/subplebbit-stats.tsx b/src/components/subplebbit-stats/subplebbit-stats.tsx index 16d9ed9c..de712dff 100644 --- a/src/components/subplebbit-stats/subplebbit-stats.tsx +++ b/src/components/subplebbit-stats/subplebbit-stats.tsx @@ -1,6 +1,8 @@ import { useLocation, useParams } from 'react-router-dom'; import { Trans, useTranslation } from 'react-i18next'; -import { useAccountComment, useComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks'; +import { useAccountComment, useSubplebbitStats } from '@plebbit/plebbit-react-hooks'; +import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits'; +import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages'; import useSubplebbitStatsVisibilityStore from '../../stores/use-subplebbit-stats-visibility-store'; import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils'; import styles from './subplebbit-stats.module.css'; @@ -12,7 +14,7 @@ const SubplebbitStats = () => { const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; - const subplebbit = useSubplebbit({ subplebbitAddress }); + const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress]); const { address, createdAt } = subplebbit || {}; let stats = useSubplebbitStats({ subplebbitAddress: address }); @@ -23,7 +25,7 @@ const SubplebbitStats = () => { const isInDescriptionView = isDescriptionView(location.pathname, params); const isInRulesView = isRulesView(location.pathname, params); - const comment = useComment({ commentCid: params?.commentCid }); + const comment = useSubplebbitsPagesStore((state) => state.comments[params?.commentCid as string]); const { deleted, locked, removed } = comment || {}; const hideStats = deleted || locked || removed || isInDescriptionView || isInRulesView; diff --git a/src/views/post/post.tsx b/src/views/post/post.tsx index f56f0158..8a3fe8a0 100644 --- a/src/views/post/post.tsx +++ b/src/views/post/post.tsx @@ -1,6 +1,6 @@ import { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { Comment, Role, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { Comment, Role, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks'; import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits'; import { useLocation, useParams } from 'react-router-dom'; import { isAllView, isDescriptionView, isRulesView } from '../../lib/utils/view-utils'; @@ -57,7 +57,7 @@ const PostPage = () => { const isInDescriptionView = isDescriptionView(location.pathname, params); const isInRulesView = isRulesView(location.pathname, params); - const subplebbit = useSubplebbit({ subplebbitAddress }); + const subplebbit = useSubplebbitsStore((state) => state.subplebbits[subplebbitAddress as string]); const { createdAt, description, rules, shortAddress, suggested, title } = subplebbit; const comment = useComment({ commentCid });