more optimizations

src/features/bracket/components/bracket-view.tsx

@@ -1,5 +1,5 @@
 import { Flex } from '@mantine/core';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { BracketMaps } from '../utils/bracket-maps';
 import { BracketRound } from './bracket-round';
 import { Match } from '../types';
@@ -16,7 +16,7 @@ const BracketView: React.FC<BracketViewProps> = ({
   onAnnounce,
 }) => {
 
-  const getParentMatchOrder = (parentLid: number): number | string => {
+  const getParentMatchOrder = useCallback((parentLid: number): number | string => {
     const parentMatch = bracketMaps.matchByLid.get(parentLid);
     if (
       parentMatch &&
@@ -26,7 +26,7 @@ const BracketView: React.FC<BracketViewProps> = ({
       return parentMatch.order;
     }
     return `Match ${parentLid}`;
-  };
+  }, [bracketMaps]);
 
   return (
     <Flex direction="row" gap={24} justify="left" pos="relative" p="xl">

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"