more optimizations

src/features/teams/components/team-list.tsx

@@ -2,6 +2,22 @@ import { Group, List, ListItem, Skeleton, Stack, Text } from "@mantine/core";
 import Avatar from "@/components/avatar";
 import { Team } from "@/features/teams/types";
 import { useNavigate } from "@tanstack/react-router";
+import { useCallback, useMemo } from "react";
+import React from "react";
+
+interface TeamListItemProps { team: Team }
+const TeamListItem = React.memo(({ team }: TeamListItemProps) => {
+  const playerNames = useMemo(() => team.players?.map(p => `${p.first_name} ${p.last_name}`) || [], [team.players]);
+
+  return <>
+    <Stack gap={0}>
+      <Text fw={500}>{`${team.name}`}</Text>
+      {
+        playerNames.map(name => <Text size='xs' c='dimmed'>{name}</Text>)
+      }
+    </Stack>
+  </>
+})
 
 interface TeamListProps {
   teams: Team[];
@@ -11,6 +27,9 @@ interface TeamListProps {
 const TeamList = ({ teams, loading = false }: TeamListProps) => {
   const navigate = useNavigate();
 
+  const handleClick = useCallback((teamId: string) =>
+    navigate({ to: `/teams/${teamId}` }), [navigate]);
+
   if (loading) return <List>
     {Array.from({ length: 10 }).map((_, i) => (
       <ListItem key={`skeleton-${i}`} py='xs' icon={<Skeleton height={40} width={40} />}
@@ -26,13 +45,9 @@ const TeamList = ({ teams, loading = false }: TeamListProps) => {
           py='xs'
           icon={<Avatar radius='sm' size={40} name={`${team.name}`} />}
           style={{ cursor: 'pointer' }}
-          onClick={() => navigate({ to: `/teams/${team.id}` })}
+          onClick={() => handleClick(team.id)}
           >
-            <Stack gap={0}>
-              <Text fw={500}>{`${team.name}`}</Text>
-              {team.players?.map(p => <Text size='xs' c='dimmed'>{p.first_name} {p.last_name}</Text>)}
-            </Stack>
-
+            <TeamListItem team={team} />
         </ListItem>
     ))}
   </List>