diff --git a/src/components/subplebbit-stats/subplebbit-stats.tsx b/src/components/subplebbit-stats/subplebbit-stats.tsx
index d12bbf29..7d232fad 100644
--- a/src/components/subplebbit-stats/subplebbit-stats.tsx
+++ b/src/components/subplebbit-stats/subplebbit-stats.tsx
@@ -1,8 +1,6 @@
import { useParams } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next';
-import { useAccountComment } from '@plebbit/plebbit-react-hooks';
-import { useSubplebbitField } from '../../hooks/use-stable-subplebbit';
-import { useStableSubplebbitStats } from '../../hooks/use-stable-subplebbit-stats';
+import { useAccountComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
import useSubplebbitsPagesStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits-pages';
import useSubplebbitStatsVisibilityStore from '../../stores/use-subplebbit-stats-visibility-store';
import { useResolvedSubplebbitAddress } from '../../hooks/use-resolved-subplebbit-address';
@@ -16,12 +14,10 @@ const SubplebbitStats = () => {
const resolvedAddress = useResolvedSubplebbitAddress();
const subplebbitAddress = resolvedAddress || accountComment?.subplebbitAddress;
- // Only subscribe to address and createdAt to avoid rerenders from updatingState changes
- const address = useSubplebbitField(subplebbitAddress, (subplebbit) => subplebbit?.address);
- const createdAt = useSubplebbitField(subplebbitAddress, (subplebbit) => subplebbit?.createdAt);
+ const subplebbit = useSubplebbit({ subplebbitAddress });
+ const { address, createdAt } = subplebbit || {};
- // Use stable stats hook that doesn't depend on useSubplebbit internally
- const stats = useStableSubplebbitStats(address);
+ const stats = useSubplebbitStats({ subplebbitAddress: address });
const { hiddenStats, toggleVisibility } = useSubplebbitStatsVisibilityStore();
const isHidden = hiddenStats[address];
@@ -54,13 +50,13 @@ const SubplebbitStats = () => {
}}
/>
{' / '}
}}
/>
|
@@ -69,13 +65,13 @@ const SubplebbitStats = () => {
}}
/>
{' / '}
}}
/>
|
@@ -86,7 +82,7 @@ const SubplebbitStats = () => {
{' / '}
}}
/>
diff --git a/src/hooks/use-stable-subplebbit-stats.ts b/src/hooks/use-stable-subplebbit-stats.ts
deleted file mode 100644
index 4a5abde6..00000000
--- a/src/hooks/use-stable-subplebbit-stats.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { useEffect } from 'react';
-import { useAccount } from '@plebbit/plebbit-react-hooks';
-import { create } from 'zustand';
-import { useSubplebbitField } from './use-stable-subplebbit';
-
-// Store to cache fetched stats and track pending fetches
-interface SubplebbitStatsState {
- stats: { [address: string]: any };
- pendingCids: { [cid: string]: boolean };
- setStats: (address: string, stats: any) => void;
- setPending: (cid: string, pending: boolean) => void;
-}
-
-const useStableSubplebbitStatsStore = create((set) => ({
- stats: {},
- pendingCids: {},
- setStats: (address, stats) =>
- set((state) => ({
- stats: { ...state.stats, [address]: stats },
- })),
- setPending: (cid, pending) =>
- set((state) => ({
- pendingCids: { ...state.pendingCids, [cid]: pending },
- })),
-}));
-
-/**
- * Stable version of useSubplebbitStats that doesn't depend on useSubplebbit internally.
- * Uses useSubplebbitField to get the statsCid without re-rendering on updatingState changes.
- */
-export const useStableSubplebbitStats = (subplebbitAddress: string | undefined) => {
- const account = useAccount();
-
- // Get statsCid using stable field selector - won't re-render on updatingState changes
- const statsCid = useSubplebbitField(subplebbitAddress, (sub) => sub?.statsCid);
-
- const stats = useStableSubplebbitStatsStore((state) => (subplebbitAddress ? state.stats[subplebbitAddress] : undefined));
- const pendingCids = useStableSubplebbitStatsStore((state) => state.pendingCids);
- const setStats = useStableSubplebbitStatsStore((state) => state.setStats);
- const setPending = useStableSubplebbitStatsStore((state) => state.setPending);
-
- useEffect(() => {
- if (!subplebbitAddress || !statsCid || !account) {
- return;
- }
-
- // Don't fetch if already fetched or pending
- if (stats || pendingCids[statsCid]) {
- return;
- }
-
- setPending(statsCid, true);
-
- account.plebbit
- .fetchCid(statsCid)
- .then((fetchedStats: any) => {
- setStats(subplebbitAddress, JSON.parse(fetchedStats));
- })
- .catch((error: any) => {
- setPending(statsCid, false);
- console.error('useStableSubplebbitStats fetchCid error', { subplebbitAddress, statsCid, error });
- });
- }, [subplebbitAddress, statsCid, account, stats, pendingCids, setStats, setPending]);
-
- return stats;
-};