diff --git a/src/components/TournamentCenter.tsx b/src/components/TournamentCenter.tsx index 40a8194..b0a23a5 100644 --- a/src/components/TournamentCenter.tsx +++ b/src/components/TournamentCenter.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Trophy, @@ -29,7 +29,10 @@ const TournamentCenter: React.FC = () => { const [showJoinModal, setShowJoinModal] = useState(false); const [selectedHorse, setSelectedHorse] = useState(null); - const playerHorses = horses.filter(h => h.owner === player?.walletAddress); + const playerHorses = useMemo(() => + horses.filter(h => h.owner === player?.walletAddress), + [horses, player?.walletAddress] + ); // Generate mock tournaments for demonstration useEffect(() => { @@ -214,14 +217,22 @@ const TournamentCenter: React.FC = () => { } }; - const filteredTournaments = tournaments.filter(t => { - switch (currentTab) { - case 'active': return t.status === 'Active'; - case 'upcoming': return t.status === 'Registration'; - case 'history': return t.status === 'Completed'; - default: return true; - } - }); + const filteredTournaments = useMemo(() => + tournaments.filter(t => { + switch (currentTab) { + case 'active': return t.status === 'Active'; + case 'upcoming': return t.status === 'Registration'; + case 'history': return t.status === 'Completed'; + default: return true; + } + }), + [tournaments, currentTab] + ); + + const tournamentWins = useMemo(() => + player?.stats.achievements.filter(a => a.name.includes('Tournament')).length || 0, + [player?.stats.achievements] + ); return (
@@ -242,7 +253,7 @@ const TournamentCenter: React.FC = () => {

Tournament Wins

- {player?.stats.achievements.filter(a => a.name.includes('Tournament')).length || 0} + {tournamentWins}