more optimizations

src/features/bracket/components/match-card.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Card, Text } from '@mantine/core';
 import { PlayIcon } from '@phosphor-icons/react';
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { MatchSlot } from './match-slot';
 import { Match } from '../types';
 
@@ -15,6 +15,14 @@ export const MatchCard: React.FC<MatchCardProps> = ({
   getParentMatchOrder, 
   onAnnounce 
 }) => {
+
+  const showAnnounce = useMemo(() => 
+    onAnnounce && match.home.team && match.away.team, 
+  [onAnnounce, match.home.team, match.away.team]);
+
+  const handleAnnounce = useCallback(() => 
+    onAnnounce?.(match.home.team, match.away.team), [match.home.team, match.away.team]);
+
   return (
     <Card
       withBorder
@@ -44,16 +52,14 @@ export const MatchCard: React.FC<MatchCardProps> = ({
         </Text>
       )}
       
-      {onAnnounce && match.home?.team && match.away?.team && (
+      {showAnnounce && (
         <ActionIcon
           pos="absolute"
           variant="filled"
           color="green"
           top={-20}
           right={-12}
-          onClick={() => {
-            onAnnounce(match.home.team, match.away.team);
-          }}
+          onClick={handleAnnounce}
           bd="none"
           style={{ boxShadow: 'none' }}
           size="xs"