More performance optimizations

wyne · Apr 13, 2024 · fb07195 · fb07195
1 parent d59d93f
commit fb07195
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/components/Rounds.tsx b/src/components/Rounds.tsx
@@ -20,6 +20,10 @@ interface RoundScollOffset {
     [key: number]: number;
 }
 
+const MemoizedRoundScoreColumn = React.memo(RoundScoreColumn);
+const MemoizedTotalScoreColumn = React.memo(TotalScoreColumn);
+const MemoizedPlayerNameColumn = React.memo(PlayerNameColumn);
+
 const Rounds: React.FunctionComponent<Props> = ({ }) => {
     const [roundScollOffset, setRoundScrollOffset] = useState<RoundScollOffset>({});
 
@@ -57,14 +61,14 @@ const Rounds: React.FunctionComponent<Props> = ({ }) => {
 
     return (
         <View style={[styles.scoreTableContainer]}>
-            <PlayerNameColumn />
-            <TotalScoreColumn />
+            <MemoizedPlayerNameColumn />
+            <MemoizedTotalScoreColumn />
             <ScrollView horizontal={true}
                 contentContainerStyle={{ flexDirection: 'row' }}
                 ref={roundsScrollViewEl}>
                 {roundsIterator.map((item, round) => (
                     <View key={round} onLayout={e => onLayoutHandler(e, round)}>
-                        <RoundScoreColumn
+                        <MemoizedRoundScoreColumn
                             round={round}
                             key={round}
                             isCurrentRound={round == roundCurrent} />

diff --git a/src/components/ScoreLog/RoundScoreColumn.tsx b/src/components/ScoreLog/RoundScoreColumn.tsx
@@ -19,9 +19,7 @@ const RoundScoreColumn: React.FunctionComponent<Props> = ({ round, isCurrentRoun
     const dispatch = useAppDispatch();
 
     const currentGameId = useAppSelector(state => state.settings.currentGameId);
-    const currentGame = useAppSelector(selectCurrentGame);
-
-    if (typeof currentGame == 'undefined') return null;
+    const playerIds = useAppSelector(state => selectCurrentGame(state)?.playerIds) || [];
 
     const onPressHandler = useCallback(async () => {
         if (disabled || !currentGameId) return;
@@ -61,7 +59,7 @@ const RoundScoreColumn: React.FunctionComponent<Props> = ({ round, isCurrentRoun
                 }}>
                     {round + 1}
                 </Text>
-                {currentGame.playerIds.map((playerId, playerIndex) => (
+                {playerIds.map((playerId, playerIndex) => (
                     <RoundScoreCell playerId={playerId} round={round} key={playerId} playerIndex={playerIndex} />
                 ))}
             </View>