Rounds render optimizations

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

Hide file tree

Showing 3 changed files with 34 additions and 21 deletions.
diff --git a/src/components/Rounds.tsx b/src/components/Rounds.tsx
@@ -67,12 +67,11 @@ const Rounds: React.FunctionComponent<Props> = ({ }) => {
                 contentContainerStyle={{ flexDirection: 'row' }}
                 ref={roundsScrollViewEl}>
                 {roundsIterator.map((item, round) => (
-                    <View key={round} onLayout={e => onLayoutHandler(e, round)}>
-                        <MemoizedRoundScoreColumn
-                            round={round}
-                            key={round}
-                            isCurrentRound={round == roundCurrent} />
-                    </View>
+                    <MemoizedRoundScoreColumn
+                        onLayout={round == roundCurrent ? e => onLayoutHandler(e, round) : undefined}
+                        round={round}
+                        key={round}
+                        isCurrentRound={round == roundCurrent} />
                 ))}
             </ScrollView>
         </View>

diff --git a/src/components/ScoreLog/PlayerNameColumn.tsx b/src/components/ScoreLog/PlayerNameColumn.tsx
@@ -1,21 +1,27 @@
 import React from 'react';
 
+import { createSelector } from '@reduxjs/toolkit';
 import { StyleSheet, Text, View } from 'react-native';
 import { Icon } from 'react-native-elements/dist/icons/Icon';
 
-import { selectSortedPlayers } from '../../../redux/GamesSlice';
 import { useAppSelector } from '../../../redux/hooks';
 import { selectCurrentGame } from '../../../redux/selectors';
+import { RootState } from '../../../redux/store';
 import { palette, systemBlue } from '../../constants';
 
-const PlayerNameColumn: React.FunctionComponent = ({ }) => {
-    const currentGame = useAppSelector(selectCurrentGame);
+const selectPlayerEntities = (state: RootState) => state.players.entities;
 
-    if (currentGame == undefined) return null;
+const selectPlayerIds = (_: RootState, playerIds: string[]) => playerIds;
 
-    const players = useAppSelector(selectSortedPlayers);
+const selectPlayerNamesByIds = createSelector(
+    [selectPlayerEntities, selectPlayerIds],
+    (players, playerIds) => playerIds.map(id => players[id]?.playerName)
+);
+
+const PlayerNameColumn: React.FunctionComponent = () => {
+    const playerIds = useAppSelector(state => selectCurrentGame(state)?.playerIds) || [];
+    const playerNames = useAppSelector(state => selectPlayerNamesByIds(state, playerIds));
 
-    if (players == undefined) return null;
 
     return (
         <View style={{ paddingVertical: 10 }}>
@@ -26,11 +32,11 @@ const PlayerNameColumn: React.FunctionComponent = ({ }) => {
                     size={19}
                     color='white' />
             </Text>
-            {players.map((player, index) => (
+            {playerNames.map((name, index) => (
                 <View key={index} style={{ paddingLeft: 5, borderLeftWidth: 5, borderColor: "#" + palette[index % palette.length] }}>
                     <Text key={index} style={{ color: 'white', maxWidth: 100, fontSize: 20, }}
                         numberOfLines={1}
-                    >{player.playerName}</Text>
+                    >{name}</Text>
                 </View>
             ))}
         </View>

diff --git a/src/components/ScoreLog/RoundScoreColumn.tsx b/src/components/ScoreLog/RoundScoreColumn.tsx
@@ -1,7 +1,7 @@
 import React, { memo, useCallback } from 'react';
 
 import analytics from '@react-native-firebase/analytics';
-import { Text, TouchableWithoutFeedback, View } from 'react-native';
+import { LayoutChangeEvent, Text, TouchableWithoutFeedback, View } from 'react-native';
 
 import { updateGame } from '../../../redux/GamesSlice';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
@@ -13,9 +13,15 @@ interface Props {
     round: number;
     isCurrentRound: boolean;
     disabled?: boolean;
+    onLayout?: (event: LayoutChangeEvent, round: number) => void;
 }
 
-const RoundScoreColumn: React.FunctionComponent<Props> = ({ round, isCurrentRound, disabled = false }) => {
+const RoundScoreColumn: React.FunctionComponent<Props> = ({
+    round,
+    isCurrentRound,
+    disabled = false,
+    onLayout,
+}) => {
     const dispatch = useAppDispatch();
 
     const currentGameId = useAppSelector(state => state.settings.currentGameId);
@@ -46,11 +52,13 @@ const RoundScoreColumn: React.FunctionComponent<Props> = ({ round, isCurrentRoun
 
     return (
         <TouchableWithoutFeedback onPress={onPressHandler}>
-            <View style={{
-                padding: 10,
-                paddingBottom: 0,
-                backgroundColor: backgroundColor,
-            }}>
+            <View
+                onLayout={(e) => onLayout?.(e, round)}
+                style={{
+                    padding: 10,
+                    paddingBottom: 0,
+                    backgroundColor: backgroundColor,
+                }}>
                 <Text style={{
                     color: isCurrentRound ? 'red' : '#AAA',
                     fontWeight: 'bold',