fix: prevent state updates on unmounted component in useStreams

src/hooks/useStreams.ts

@@ -12,6 +12,7 @@ export function useStreams(address: string | null) {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(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])