diff --git a/hooks/useWavesList.ts b/hooks/useWavesList.ts index 198c5f2539..ef0625d669 100644 --- a/hooks/useWavesList.ts +++ b/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([]); + + // Use ref to avoid too many re-renders for derived values + const prevMainWavesRef = useRef([]); const prevPinnedWavesRef = useRef([]); // Track connected identity state - memoize to prevent re-renders @@ -72,6 +84,7 @@ const useWavesList = () => { const mainWavesMap = useMemo(() => { const map = new Map(); 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(() => [], []); + 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,