Improved overall performance by remove FlatList extraData and adding keys

components/Lists/WebSectionList.js

@@ -172,6 +172,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
                 {/*$FlowFixMe*/}
                 <SectionList
                     sections={dataset}
+                    extraData={this.props.updateData}
                     refreshControl={
                         <RefreshControl
                             refreshing={this.state.refreshing}

components/Sidebar/Sidebar.js

@@ -19,7 +19,6 @@ type Props = {
 };
 
 type State = {
-    active: string,
     isLoggedIn: boolean,
     dialogVisible: boolean,
 };
@@ -156,15 +155,14 @@ class SideBar extends React.PureComponent<Props, State> {
         this.colors = props.theme.colors;
         ConnectionManager.getInstance().addLoginStateListener((value) => this.onLoginStateChange(value));
         this.state = {
-            active: 'Home',
             isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
             dialogVisible: false,
         };
     }
 
-    showDisconnectDialog = () => this.setState({ dialogVisible: true });
+    showDisconnectDialog = () => this.setState({dialogVisible: true});
 
-    hideDisconnectDialog = () => this.setState({ dialogVisible: false });
+    hideDisconnectDialog = () => this.setState({dialogVisible: false});
 
 
     onLoginStateChange(isLoggedIn: boolean) {
@@ -238,9 +236,10 @@ class SideBar extends React.PureComponent<Props, State> {
                         style={styles.drawerCover}
                     />
                 </TouchableRipple>
+                {/*$FlowFixMe*/}
                 <FlatList
                     data={this.dataSet}
-                    extraData={this.state}
+                    extraData={this.state.isLoggedIn}
                     keyExtractor={this.listKeyExtractor}
                     renderItem={this.getRenderItem}
                 />

screens/About/AboutScreen.js

@@ -244,9 +244,7 @@ class AboutScreen extends React.Component<Props, State> {
                 <Card.Content>
                     <FlatList
                         data={this.appData}
-                        extraData={this.state}
                         keyExtractor={this.keyExtractor}
-                        listKey={"app"}
                         renderItem={this.getCardItem}
                     />
                 </Card.Content>
@@ -269,17 +267,15 @@ class AboutScreen extends React.Component<Props, State> {
                     <Title>{i18n.t('aboutScreen.author')}</Title>
                     <FlatList
                         data={this.authorData}
-                        extraData={this.state}
                         keyExtractor={this.keyExtractor}
-                        listKey={"team1"}
+                        listKey={"1"}
                         renderItem={this.getCardItem}
                     />
                     <Title>{i18n.t('aboutScreen.additionalDev')}</Title>
                     <FlatList
                         data={this.additionalDevData}
-                        extraData={this.state}
                         keyExtractor={this.keyExtractor}
-                        listKey={"team2"}
+                        listKey={"2"}
                         renderItem={this.getCardItem}
                     />
                 </Card.Content>
@@ -299,9 +295,7 @@ class AboutScreen extends React.Component<Props, State> {
                     <Title>{i18n.t('aboutScreen.technologies')}</Title>
                     <FlatList
                         data={this.technoData}
-                        extraData={this.state}
                         keyExtractor={this.keyExtractor}
-                        listKey={"techno"}
                         renderItem={this.getCardItem}
                     />
                 </Card.Content>
@@ -404,28 +398,24 @@ class AboutScreen extends React.Component<Props, State> {
                 <Button
                     icon="email"
                     mode="contained"
-                    dark={true}
-                    color={this.colors.primary}
                     style={{
                         marginTop: 20,
                         marginLeft: 'auto',
                         marginRight: 'auto',
                     }}
                     onPress={this.onPressMail}>
-                    <Text>{i18n.t('aboutScreen.bugsMail')}</Text>
+                    {i18n.t('aboutScreen.bugsMail')}
                 </Button>
                 <Button
                     icon="git"
                     mode="contained"
-                    dark={true}
-                    color={this.colors.primary}
                     style={{
                         marginTop: 20,
                         marginLeft: 'auto',
                         marginRight: 'auto',
                     }}
                     onPress={this.onPressGit}>
-                    <Text>{i18n.t('aboutScreen.bugsGit')}</Text>
+                    {i18n.t('aboutScreen.bugsGit')}
                 </Button>
             </View>
         );
@@ -476,8 +466,6 @@ class AboutScreen extends React.Component<Props, State> {
                 <FlatList
                     style={{padding: 5}}
                     data={this.dataOrder}
-                    extraData={this.state}
-                    keyExtractor={(item) => item.id}
                     renderItem={this.getMainCard}
                 />
             </View>

screens/HomeScreen.js

@@ -117,16 +117,6 @@ class HomeScreen extends React.Component<Props> {
         this.props.navigation.navigate('SelfMenuScreen');
     }
 
-    /**
-     * Extract a key for the given item
-     *
-     * @param item The item to extract the key from
-     * @return {*} The extracted key
-     */
-    getKeyExtractor(item: Object) {
-        return item !== undefined ? item.id : undefined;
-    }
-
     /**
      * Creates the dataset to be used in the FlatList
      *
@@ -145,15 +135,11 @@ class HomeScreen extends React.Component<Props> {
             {
                 title: '',
                 data: dashboardData,
-                extraData: super.state,
-                keyExtractor: this.getKeyExtractor,
                 id: SECTIONS_ID[0]
             },
             {
                 title: i18n.t('homeScreen.newsFeed'),
                 data: newsData,
-                extraData: super.state,
-                keyExtractor: this.getKeyExtractor,
                 id: SECTIONS_ID[1]
             }
         ];

screens/Proximo/ProximoMainScreen.js

@@ -142,7 +142,6 @@ class ProximoMainScreen extends React.Component<Props, State> {
             {
                 title: '',
                 data: this.generateData(fetchedData),
-                extraData: this.state,
                 keyExtractor: this.getKeyExtractor
             }
         ];

screens/Proxiwash/ProxiwashScreen.js

@@ -272,14 +272,12 @@ class ProxiwashScreen extends React.Component<Props, State> {
                 title: i18n.t('proxiwashScreen.dryers'),
                 icon: 'tumble-dryer',
                 data: data.dryers === undefined ? [] : data.dryers,
-                extraData: this.state,
                 keyExtractor: this.getKeyExtractor
             },
             {
                 title: i18n.t('proxiwashScreen.washers'),
                 icon: 'washing-machine',
                 data: data.washers === undefined ? [] : data.washers,
-                extraData: this.state,
                 keyExtractor: this.getKeyExtractor
             },
         ];

screens/SelfMenuScreen.js

@@ -56,7 +56,6 @@ class SelfMenuScreen extends React.Component<Props> {
                 {
                     title: '',
                     data: [],
-                    extraData: super.state,
                     keyExtractor: this.getKeyExtractor
                 }
             ];
@@ -69,7 +68,6 @@ class SelfMenuScreen extends React.Component<Props> {
                 {
                     title: DateManager.getInstance().getTranslatedDate(fetchedData[i].date),
                     data: fetchedData[i].meal[0].foodcategory,
-                    extraData: super.state,
                     keyExtractor: this.getKeyExtractor,
                 }
             );

screens/Tetris/GridManager.js

@@ -5,7 +5,7 @@ import ScoreManager from "./ScoreManager";
 import type {coordinates} from './Shapes/BaseShape';
 
 
-export type cell = {color: string, isEmpty: boolean};
+export type cell = {color: string, isEmpty: boolean, key: string};
 export type grid = Array<Array<cell>>;
 
 /**
@@ -50,6 +50,7 @@ export default class GridManager {
             line.push({
                 color: this.#colors.tetrisBackground,
                 isEmpty: true,
+                key: col.toString(),
             });
         }
         return line;

screens/Tetris/Piece.js

@@ -57,6 +57,7 @@ export default class Piece {
             grid[coord[i].y][coord[i].x] = {
                 color: this.#colors.tetrisBackground,
                 isEmpty: true,
+                key: grid[coord[i].y][coord[i].x].key
             };
         }
     }
@@ -73,6 +74,7 @@ export default class Piece {
             grid[coord[i].y][coord[i].x] = {
                 color: this.#currentShape.getColor(),
                 isEmpty: false,
+                key: grid[coord[i].y][coord[i].x].key
             };
         }
     }

screens/Tetris/components/Cell.js

@@ -5,9 +5,7 @@ import {View} from 'react-native';
 import {withTheme} from 'react-native-paper';
 
 type Props = {
-    color: string,
+    item: Object
-    isEmpty: boolean,
-    id: string,
 }
 
 class Cell extends React.PureComponent<Props> {
@@ -20,17 +18,19 @@ class Cell extends React.PureComponent<Props> {
     }
 
     render() {
+        const item = this.props.item;
         return (
             <View
                 style={{
                     flex: 1,
-                    backgroundColor: this.props.isEmpty ? 'transparent' : this.props.color,
+                    backgroundColor: item.isEmpty ? 'transparent' : item.color,
-                    borderColor: this.props.isEmpty ? 'transparent' : this.colors.tetrisBorder,
+                    borderColor: item.isEmpty ? 'transparent' : this.colors.tetrisBorder,
                     borderStyle: 'solid',
                     borderRadius: 2,
                     borderWidth: 1,
                     aspectRatio: 1,
                 }}
+                key={item.key}
             />
         );
     }

screens/Tetris/components/Grid.js

@@ -11,11 +11,11 @@ type Props = {
     backgroundColor: string,
     height: number,
     width: number,
-    containerMaxHeight: number|string,
+    containerMaxHeight: number | string,
-    containerMaxWidth: number|string,
+    containerMaxWidth: number | string,
 }
 
-class Grid extends React.Component<Props>{
+class Grid extends React.Component<Props> {
 
     colors: Object;
 
@@ -25,22 +25,24 @@ class Grid extends React.Component<Props>{
     }
 
     getRow(rowNumber: number) {
-        let cells = [];
+        let cells = this.props.grid[rowNumber].map(this.getCellRender);
-        for (let i = 0; i < this.props.width; i++) {
+        return (
-            let cell = this.props.grid[rowNumber][i];
+            <View
-            let key = rowNumber + ':' + i;
+                style={{
-            cells.push(<Cell color={cell.color} isEmpty={cell.isEmpty} id={key}/>);
+                    flexDirection: 'row',
-        }
+                    backgroundColor: this.props.backgroundColor,
-        return(
+                }}
-            <View style={{
+                key={rowNumber.toString()}
-                flexDirection: 'row',
+            >
-                backgroundColor: this.props.backgroundColor,
-            }}>
                 {cells}
             </View>
         );
     }
 
+    getCellRender = (item: Object) => {
+        return <Cell item={item} key={item.key}/>;
+    };
+
     getGrid() {
         let rows = [];
         for (let i = 0; i < this.props.height; i++) {
@@ -55,7 +57,7 @@ class Grid extends React.Component<Props>{
                 flexDirection: 'column',
                 maxWidth: this.props.containerMaxWidth,
                 maxHeight: this.props.containerMaxHeight,
-                aspectRatio: this.props.width/this.props.height,
+                aspectRatio: this.props.width / this.props.height,
                 marginLeft: 'auto',
                 marginRight: 'auto',
             }}>

screens/Tetris/components/Preview.js

@@ -22,19 +22,24 @@ class Preview extends React.PureComponent<Props> {
         let grids = [];
         for (let i = 0; i < this.props.next.length; i++) {
             grids.push(
-                <Grid
+                this.getGridRender(this.props.next[i], i)
-                    width={this.props.next[i][0].length}
-                    height={this.props.next[i].length}
-                    grid={this.props.next[i]}
-                    containerMaxHeight={50}
-                    containerMaxWidth={50}
-                    backgroundColor={'transparent'}
-                />
             );
         }
         return grids;
     }
 
+    getGridRender(item: Object, index: number) {
+        return <Grid
+            width={item[0].length}
+            height={item.length}
+            grid={item}
+            containerMaxHeight={50}
+            containerMaxWidth={50}
+            backgroundColor={'transparent'}
+            key={index.toString()}
+        />;
+    };
+
     render() {
         if (this.props.next.length > 0) {
             return (