Fix extra renders

wyne · Apr 21, 2024 · 327077d · 327077d
1 parent 1dd6b76
commit 327077d
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 31 deletions.
diff --git a/redux/GamesSlice.ts b/redux/GamesSlice.ts
@@ -207,19 +207,19 @@ export const selectSortSelectorKey = (state: RootState, gameId: string) => {
 export const makeSelectPlayerColors = () => createSelector(
     [
         (state: RootState, gameId: string) => state.games.entities[gameId],
-        (state: RootState, gameId: string, playerId: string) => state.players.entities[playerId],
+        (state: RootState, gameId: string, playerId: string) => playerId,
     ],
-    (game, player) => {
+    (game, playerId) => {
         // TODO: Get player color if it exists
 
-        if (!game || !player) {
+        if (!game || !playerId) {
             return ['#000000', '#FFFFFF'];
         }
 
         const paletteName = game.palette;
         const playerIds = game.playerIds;
 
-        const index = playerIds.indexOf(player.id);
+        const index = playerIds.indexOf(playerId);
 
         const palette = getPalette(paletteName || 'original');
 

diff --git a/redux/PlayersSlice.ts b/redux/PlayersSlice.ts
@@ -1,5 +1,7 @@
 import crashlytics from '@react-native-firebase/crashlytics';
-import { PayloadAction, createEntityAdapter, createSlice } from '@reduxjs/toolkit';
+import { PayloadAction, createEntityAdapter, createSelector, createSlice } from '@reduxjs/toolkit';
+
+import { RootState } from './store';
 
 type RoundIndex = number;
 
@@ -72,3 +74,10 @@ export const {
     selectIds: selectPlayerIds,
     // Pass in a selector that returns the posts slice of state 
 } = playersAdapter.getSelectors((state: PlayersSlice) => state.players);
+
+export const selectPlayerNameById = createSelector(
+    [
+        (state: RootState, playerId: string) => state.players.entities[playerId]
+    ],
+    (player) => player?.playerName
+);
diff --git a/src/components/PlayerListItem.tsx b/src/components/PlayerListItem.tsx
@@ -6,7 +6,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { Icon, ListItem } from 'react-native-elements';
 
-import { selectGameById, selectPlayerColors, updateGame } from '../../redux/GamesSlice';
+import { makeSelectPlayerColors, selectGameById, updateGame } from '../../redux/GamesSlice';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { removePlayer, selectPlayerById } from '../../redux/PlayersSlice';
 import { selectCurrentGame } from '../../redux/selectors';
@@ -31,7 +31,9 @@ const PlayerListItem: React.FunctionComponent<Props> = ({
     const currentGameId = useAppSelector(state => selectCurrentGame(state)?.id);
     const playerIds = useAppSelector(state => selectGameById(state, currentGameId || '')?.playerIds);
     const player = useAppSelector(state => selectPlayerById(state, playerId));
-    const playerColors = useAppSelector(state => selectPlayerColors(state, currentGameId || '', index || 0));
+
+    const selectPlayerColors = makeSelectPlayerColors();
+    const playerColors = useAppSelector(state => selectPlayerColors(state, currentGameId || '', playerId));
 
     if (currentGameId == '' || currentGameId === undefined) return null;
     if (playerIds === undefined) return null;

diff --git a/src/components/Rounds.tsx b/src/components/Rounds.tsx
@@ -5,12 +5,12 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { LayoutChangeEvent, Platform, ScrollView, StyleSheet, View } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
-import { selectGameById, selectSortSelectorKey, setSortSelector } from '../../redux/GamesSlice';
+import { selectGameById, setSortSelector } from '../../redux/GamesSlice';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 
 import PlayerNameColumn from './ScoreLog/PlayerNameColumn';
 import RoundScoreColumn from './ScoreLog/RoundScoreColumn';
-import { SortSelectorKey, sortSelectors } from './ScoreLog/SortHelper';
+import { SortSelectorKey } from './ScoreLog/SortHelper';
 import TotalScoreColumn from './ScoreLog/TotalScoreColumn';
 
 interface Props {
@@ -61,9 +61,6 @@ const Rounds: React.FunctionComponent<Props> = ({ }) => {
 
     const dispatch = useAppDispatch();
 
-    const sortSelectorKey = useAppSelector(state => selectSortSelectorKey(state, currentGameId));
-    const sortSelector = sortSelectors[sortSelectorKey];
-
     const sortByPlayerIndex = () => {
         dispatch(setSortSelector({ gameId: currentGameId, sortSelector: SortSelectorKey.ByIndex }));
     };
@@ -88,10 +85,10 @@ const Rounds: React.FunctionComponent<Props> = ({ }) => {
                 {roundsIterator.map((item, round) => (
                     <View key={round} onLayout={e => onLayoutHandler(e, round)}>
                         <MemoizedRoundScoreColumn
-                            sortSelector={sortSelector}
                             round={round}
                             key={round}
-                            isCurrentRound={round == roundCurrent} />
+                            isCurrentRound={round == roundCurrent}
+                        />
                     </View>
                 ))}
             </ScrollView>

diff --git a/src/components/ScoreLog/PlayerNameColumn.tsx b/src/components/ScoreLog/PlayerNameColumn.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { StyleSheet, Text, View } from 'react-native';
 import { Icon } from 'react-native-elements/dist/icons/Icon';
 
 import { makeSelectPlayerColors } from '../../../redux/GamesSlice';
 import { useAppSelector } from '../../../redux/hooks';
-import { selectPlayerById } from '../../../redux/PlayersSlice';
+import { selectPlayerNameById } from '../../../redux/PlayersSlice';
 import { selectCurrentGame } from '../../../redux/selectors';
 
 import { SortDirectionKey, SortSelectorKey, sortSelectors } from './SortHelper';
@@ -18,9 +18,11 @@ interface CellProps {
 
 const PlayerNameCell: React.FunctionComponent<CellProps> = ({ index, playerId }) => {
     const currentGameId = useAppSelector(state => selectCurrentGame(state)?.id);
-    const selectPlayerColors = makeSelectPlayerColors();
+
+    const selectPlayerColors = useMemo(() => makeSelectPlayerColors(), []);
     const playerColors = useAppSelector(state => selectPlayerColors(state, currentGameId || '', playerId));
-    const playerName = useAppSelector(state => selectPlayerById(state, playerId)?.playerName);
+
+    const playerName = useAppSelector(state => selectPlayerNameById(state, playerId));
 
     return (
         <View key={index} style={{ paddingLeft: 5, borderLeftWidth: 5, borderColor: playerColors[0] }}>
@@ -56,6 +58,7 @@ const PlayerHeaderCell: React.FunctionComponent = () => {
     );
 };
 
+const MemoizedPlayerNameCell = React.memo(PlayerNameCell);
 
 const PlayerNameColumn: React.FunctionComponent = () => {
     const sortKey = useAppSelector(state => selectCurrentGame(state)?.sortSelectorKey);
@@ -68,7 +71,7 @@ const PlayerNameColumn: React.FunctionComponent = () => {
             <PlayerHeaderCell />
 
             {sortedPlayerIds.map((playerId, index) => (
-                playerId && <PlayerNameCell key={index} index={index} playerId={playerId} />
+                playerId && <MemoizedPlayerNameCell key={index} index={index} playerId={playerId} />
             ))}
         </View>
     );

diff --git a/src/components/ScoreLog/RoundScoreColumn.tsx b/src/components/ScoreLog/RoundScoreColumn.tsx
@@ -3,31 +3,32 @@ import React, { memo, useCallback } from 'react';
 import analytics from '@react-native-firebase/analytics';
 import { LayoutChangeEvent, Text, TouchableWithoutFeedback, View } from 'react-native';
 
-import { updateGame } from '../../../redux/GamesSlice';
+import { selectSortSelectorKey, updateGame } from '../../../redux/GamesSlice';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
-import { RootState } from '../../../redux/store';
 
 import RoundScoreCell from './RoundScoreCell';
+import { sortSelectors } from './SortHelper';
 
 interface Props {
     round: number;
     isCurrentRound: boolean;
     disabled?: boolean;
-    sortSelector: (state: RootState) => string[];
     onLayout?: (event: LayoutChangeEvent, round: number) => void;
 }
 
 const RoundScoreColumn: React.FunctionComponent<Props> = ({
     round,
     isCurrentRound,
     disabled = false,
-    sortSelector,
     onLayout,
 }) => {
     const dispatch = useAppDispatch();
 
     const currentGameId = useAppSelector(state => state.settings.currentGameId);
 
+    const sortSelectorKey = useAppSelector(state => selectSortSelectorKey(state, currentGameId || ''));
+    const sortSelector = sortSelectors[sortSelectorKey];
+
     const sortedPlayerIds = useAppSelector(sortSelector);
 
     const onPressHandler = useCallback(async () => {

diff --git a/src/screens/ShareScreen.tsx b/src/screens/ShareScreen.tsx
@@ -9,12 +9,11 @@ import { Button, Icon } from 'react-native-elements';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { captureRef } from 'react-native-view-shot';
 
-import { selectGameById, selectSortSelectorKey } from '../../redux/GamesSlice';
+import { selectGameById } from '../../redux/GamesSlice';
 import { useAppSelector } from '../../redux/hooks';
 import { selectCurrentGame } from '../../redux/selectors';
 import PlayerNameColumn from '../components/ScoreLog/PlayerNameColumn';
 import RoundScoreColumn from '../components/ScoreLog/RoundScoreColumn';
-import { sortSelectors } from '../components/ScoreLog/SortHelper';
 import TotalScoreColumn from '../components/ScoreLog/TotalScoreColumn';
 import { systemBlue } from '../constants';
 
@@ -54,9 +53,6 @@ const ShareScreen: React.FunctionComponent<Props> = ({ navigation }) => {
         await analytics().logEvent('share_image');
     };
 
-    const sortSelectorKey = useAppSelector(state => selectSortSelectorKey(state, currentGameId));
-    const sortSelector = sortSelectors[sortSelectorKey];
-
     return (
         <SafeAreaView edges={['right', 'left']}
             style={[styles.contentContainer, { height: 'auto' }]}>
@@ -98,12 +94,11 @@ const ShareScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                             </Text>
                         </View>
                         <View style={{ flexDirection: 'row' }}>
-                            <PlayerNameColumn sortSelector={sortSelector} sortSelectorKey={sortSelectorKey} />
-                            <TotalScoreColumn sortSelector={sortSelector} sortSelectorKey={sortSelectorKey} />
+                            <PlayerNameColumn />
+                            <TotalScoreColumn />
                             {roundsIterator.map((item, round) => (
                                 <View key={round}>
                                     <RoundScoreColumn
-                                        sortSelector={sortSelector}
                                         round={round}
                                         key={round}
                                         isCurrentRound={false}