diff --git a/src/app/page.tsx b/src/app/page.tsx index 5948c26..007815c 100644 --- a/src/app/page.tsx +++ b/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} /> 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(() => {