diff --git a/src/hooks/useStreams.ts b/src/hooks/useStreams.ts index 1ed49d1..283f7f3 100644 --- a/src/hooks/useStreams.ts +++ b/src/hooks/useStreams.ts @@ -12,6 +12,7 @@ export function useStreams(address: string | null) { const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const { network } = useWallet() + const mountedRef = useRef(true) const rpcUrl = getRpcUrl(network ?? 'testnet') @@ -24,20 +25,31 @@ export function useStreams(address: string | null) { setError(null) try { const result = await fetchStreamsByAddress(address, rpcUrl) - setStreams(result) + // Guard against setting state on an unmounted component + if (mountedRef.current) { + setStreams(result) + } } catch (err) { - setError(err instanceof Error ? err.message : 'Failed to fetch streams') + if (mountedRef.current) { + setError(err instanceof Error ? err.message : 'Failed to fetch streams') + } } finally { - setLoading(false) + if (mountedRef.current) { + setLoading(false) + } } }, [address, rpcUrl]) useEffect(() => { + mountedRef.current = true fetchData() const interval = setInterval(fetchData, 10_000) return () => { + // Clear the interval and mark unmounted to prevent state updates + // on an unmounted component (fixes memory leak) + mountedRef.current = false clearInterval(interval) } }, [fetchData])