wip

hooks/useWavesList.ts

@@ -1,6 +1,13 @@
 "use client";
 
-import { useContext, useMemo, useCallback, useRef } from "react";
+import {
+  useContext,
+  useMemo,
+  useCallback,
+  useRef,
+  useEffect,
+  useState,
+} from "react";
 import { AuthContext } from "@/components/auth/Auth";
 import { useWavesOverview } from "./useWavesOverview";
 import { WAVE_FOLLOWING_WAVES_PARAMS } from "@/components/react-query-wrapper/utils/query-utils";
@@ -46,6 +53,11 @@ const useWavesList = () => {
     refetch: refetchPinnedWaves,
   } = usePinnedWavesServer();
   const [following] = useShowFollowingWaves();
+  // Use state for allWaves instead of ref to ensure reactivity
+  const [allWaves, setAllWaves] = useState<EnhancedWave[]>([]);
+
+  // Use ref to avoid too many re-renders for derived values
+  const prevMainWavesRef = useRef<ApiWave[]>([]);
   const prevPinnedWavesRef = useRef<EnhancedWave[]>([]);
 
   // Track connected identity state - memoize to prevent re-renders
@@ -72,6 +84,7 @@ const useWavesList = () => {
   const mainWavesMap = useMemo(() => {
     const map = new Map<string, ApiWave>();
     mainWaves.forEach((wave) => map.set(wave.id, wave));
+    prevMainWavesRef.current = mainWaves;
     return map;
   }, [mainWaves]);
 
@@ -81,7 +94,7 @@ const useWavesList = () => {
   }, [mainWavesMap]);
 
   // Server provides full pinned waves data, so no individual fetching needed
-  const missingPinnedIds = useMemo<string[]>(() => [], []);
+  const missingPinnedIds: string[] = [];
   // Function to refetch all waves (main and pinned)
   const refetchAllWaves = useCallback(() => {
     // Refetch main waves overview
@@ -168,7 +181,16 @@ const useWavesList = () => {
 
   // New drops counting logic has been removed and will be managed by context
 
-  const allWaves = combinedWaves;
+  // Update allWaves state when the combined waves change
+  useEffect(() => {
+    // Using a functional update and removing the allWaves dependency
+    // to break the infinite update cycle
+    setAllWaves((prevWaves) => {
+      return !areWavesEqual(combinedWaves, prevWaves)
+        ? combinedWaves
+        : prevWaves;
+    });
+  }, [combinedWaves]);
 
   // Use server-side loading and error states
   const isPinnedWavesLoading = isPinnedWavesLoadingServer;
@@ -203,7 +225,7 @@ const useWavesList = () => {
       removePinnedWave: unpinWave,
 
       // Additional data that might be useful
-      mainWaves,
+      mainWaves: prevMainWavesRef.current,
       missingPinnedIds,
       mainWavesRefetch,
       // Refetch all waves including main and pinned
@@ -216,12 +238,12 @@ const useWavesList = () => {
       hasNextPage,
       fetchNextPageStable,
       mainWavesStatus,
-      mainWaves,
       allPinnedWaves,
       isPinnedWavesLoading,
       hasPinnedWavesError,
       pinWave,
       unpinWave,
+      prevMainWavesRef.current,
       missingPinnedIds,
       mainWavesRefetch,
       refetchAllWaves,