Fix: tag filter causes "Maximum update depth exceeded" crash

src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Header from '@/components/Header';
 import SubscriptionList from '@/components/SubscriptionList';
 import SubscriptionModal from '@/components/SubscriptionModal';
@@ -140,6 +140,17 @@ export default function Home() {
     );
   };
 
+  const handleFilteredSubscriptionsChange = useCallback(
+    (nextFilteredSubscriptions: Subscription[]) => {
+      setFilteredSubscriptions(nextFilteredSubscriptions);
+    },
+    []
+  );
+
+  const handleTagFilterChange = useCallback((tags: string[]) => {
+    setSelectedTags(tags);
+  }, []);
+
   const handleDateClick = (date: Date) => {
     setSelectedDate(date);
     setSelectedSubscription(undefined);
@@ -342,8 +353,8 @@ export default function Home() {
           onDelete={handleDeleteSubscription}
           onToggleInclude={handleToggleInclude}
           showCurrencySymbol={userConfig.showCurrencySymbol}
-          onFilteredSubscriptionsChange={(filteredSubs) => setFilteredSubscriptions(filteredSubs)}
-          onTagFilterChange={(tags) => setSelectedTags(tags)}
+          onFilteredSubscriptionsChange={handleFilteredSubscriptionsChange}
+          onTagFilterChange={handleTagFilterChange}
         />
         <Totals
           subscriptions={filteredSubscriptions || subscriptions}

src/components/SubscriptionList.tsx

@@ -242,11 +242,14 @@ export default function SubscriptionList({
   };
 
   // Filter subscriptions by tags
-  const filteredSubscriptions = tagFilters.length > 0
-    ? subscriptions.filter(sub =>
-      sub.tags && sub.tags.some(tag => tagFilters.includes(tag))
-    )
-    : subscriptions;
+  const filteredSubscriptions = useMemo(() =>
+    tagFilters.length > 0
+      ? subscriptions.filter(sub =>
+        sub.tags && sub.tags.some(tag => tagFilters.includes(tag))
+      )
+      : subscriptions,
+    [subscriptions, tagFilters]
+  );
 
   // Notify parent about filtered subscriptions
   useEffect(() => {