more optimizations

src/features/tournaments/components/tournament-list.tsx

@@ -2,6 +2,7 @@ import { List, ListItem, Skeleton, Text } from "@mantine/core";
 import { useNavigate } from "@tanstack/react-router";
 import Avatar from "@/components/avatar";
 import { Tournament } from "../types";
+import { useCallback } from "react";
 
 interface TournamentListProps {
   tournaments: Tournament[];
@@ -10,6 +11,9 @@ interface TournamentListProps {
 
 const TournamentList = ({ tournaments, loading = false }: TournamentListProps) => {
   const navigate = useNavigate();
+
+  const handleClick = useCallback((tournamentId: string) => 
+    navigate({ to: `/tournaments/${tournamentId}` }), [navigate]);
   
   if (loading) return <List>
     {Array.from({ length: 10 }).map((_, i) => (
@@ -27,9 +31,7 @@ const TournamentList = ({ tournaments, loading = false }: TournamentListProps) =
         py='xs'
         icon={<Avatar radius='xs' size={40} name={`${tournament.name}`} src={`/api/files/tournaments/${tournament.id}/${tournament.logo}`} />}
         style={{ cursor: 'pointer' }}
-        onClick={() => {
-          navigate({ to: `/tournaments/${tournament.id}` });
-        }}
+        onClick={() => handleClick(tournament.id)}
       >
         <Text fw={500}>{`${tournament.name}`}</Text>
       </ListItem>