revert refactoring for rpc state rerenders, fix home stats

src/hooks/use-stable-subplebbit.ts

@@ -69,34 +69,3 @@ export const useSubplebbitField = <T>(subplebbitAddress: string | undefined, sel
 
   return field;
 };
-
-/**
- * Hook to get multiple subplebbits with stable references.
- * Only re-renders when actual content changes (updatedAt, posts pages), not transient state.
- *
- * @param subplebbitAddresses - Array of subplebbit addresses
- * @returns Array of subplebbit objects
- */
-export const useStableSubplebbits = (subplebbitAddresses: string[]) => {
-  const subplebbits = useSubplebbitsStore(
-    (state) => subplebbitAddresses.map((address) => state.subplebbits[address]),
-    // Custom equality: only re-render if stable content fields change
-    (prev, next) => {
-      if (prev.length !== next.length) return false;
-      return prev.every((p, i) => {
-        const n = next[i];
-        if (p === n) return true;
-        if (!p || !n) return p === n;
-        // Compare stable content fields only - ignore updatingState, state, clients, etc.
-        return (
-          p.address === n.address &&
-          p.updatedAt === n.updatedAt &&
-          // For PopularThreadsBox: compare posts pages reference (changes when new posts loaded)
-          p.posts?.pages?.hot === n.posts?.pages?.hot
-        );
-      });
-    },
-  );
-
-  return subplebbits;
-};

src/hooks/use-subplebbits-stats.ts

@@ -1,70 +1,13 @@
-import { useEffect, useMemo } from 'react';
-import { useAccount } from '@plebbit/plebbit-react-hooks';
-import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
+import { useEffect } from 'react';
+import { useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
 import { create } from 'zustand';
 
-const pendingFetchCid: { [cid: string]: boolean } = {};
-
-/**
- * Hook to get stats for multiple subplebbits.
- * Uses stable store selector to avoid re-renders from updatingState changes.
- */
-const useSubplebbitsStats = (options: any) => {
-  const { subplebbitAddresses, accountName } = options || {};
-  const account = useAccount({ accountName });
-
-  // Use stable selector to only get statsCid for each address
-  // This avoids re-renders when only updatingState changes
-  const statsCids = useSubplebbitsStore(
-    (state) =>
-      (subplebbitAddresses || []).map((address: string) => ({
-        address,
-        statsCid: state.subplebbits[address]?.statsCid,
-      })),
-    // Custom equality: only re-render if statsCid values change
-    (prev, next) => {
-      if (prev.length !== next.length) return false;
-      return prev.every((p: any, i: number) => p.address === next[i].address && p.statsCid === next[i].statsCid);
-    },
-  );
-
-  const { setSubplebbitStats, subplebbitsStats } = useSubplebbitsStatsStore();
-
-  useEffect(() => {
-    if (!subplebbitAddresses || subplebbitAddresses.length === 0 || !account) {
-      return;
-    }
-
-    statsCids.forEach(({ address, statsCid }: { address: string; statsCid: string | undefined }) => {
-      if (statsCid && !subplebbitsStats[address] && !pendingFetchCid[statsCid]) {
-        pendingFetchCid[statsCid] = true;
-        account.plebbit
-          .fetchCid(statsCid)
-          .then((fetchedStats: any) => {
-            setSubplebbitStats(address, JSON.parse(fetchedStats));
-          })
-          .catch((error: any) => {
-            pendingFetchCid[statsCid] = false;
-            console.error('Fetching subplebbit stats failed', { subplebbitAddress: address, error });
-          });
-      }
-    });
-  }, [account, statsCids, setSubplebbitStats, subplebbitsStats, subplebbitAddresses]);
-
-  return useMemo(() => {
-    return subplebbitAddresses.reduce((acc: any, address: any) => {
-      acc[address] = subplebbitsStats[address] || { loading: true };
-      return acc;
-    }, {});
-  }, [subplebbitsStats, subplebbitAddresses]);
-};
-
 export type SubplebbitsStatsState = {
   subplebbitsStats: { [subplebbitAddress: string]: any };
-  setSubplebbitStats: Function;
+  setSubplebbitStats: (subplebbitAddress: string, stats: any) => void;
 };
 
-const useSubplebbitsStatsStore = create<SubplebbitsStatsState>((set) => ({
+export const useSubplebbitsStatsStore = create<SubplebbitsStatsState>((set) => ({
   subplebbitsStats: {},
   setSubplebbitStats: (subplebbitAddress: string, subplebbitStats: any) =>
     set((state) => ({
@@ -72,4 +15,20 @@ const useSubplebbitsStatsStore = create<SubplebbitsStatsState>((set) => ({
     })),
 }));
 
-export default useSubplebbitsStats;
+/**
+ * Component that fetches stats for a single subplebbit and stores them.
+ * Render one of these for each subplebbit you want to track stats for.
+ */
+export const SubplebbitStatsCollector = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
+  const stats = useSubplebbitStats({ subplebbitAddress });
+  const setSubplebbitStats = useSubplebbitsStatsStore((state) => state.setSubplebbitStats);
+
+  useEffect(() => {
+    // Only update store when we have actual stats (not just loading state)
+    if (stats && stats.allPostCount !== undefined) {
+      setSubplebbitStats(subplebbitAddress, stats);
+    }
+  }, [stats, subplebbitAddress, setSubplebbitStats]);
+
+  return null; // This is a data-fetching component, renders nothing
+};