Use pure component for cells

screens/Tetris/GameLogic.js

@@ -25,7 +25,7 @@ export default class GameLogic {
         this.height = height;
         this.width = width;
         this.gameRunning = false;
-        this.gameTick = 250;
+        this.gameTick = 1000;
     }
 
     getHeight(): number {

screens/Tetris/components/Cell.js

@@ -4,18 +4,37 @@ import * as React from 'react';
 import {View} from 'react-native';
 import {withTheme} from 'react-native-paper';
 
-function Cell(props) {
+type Props = {
-    const colors = props.theme.colors;
+    color: string,
+    isEmpty: boolean,
+    id: string,
+}
+
+class Cell extends React.PureComponent<Props> {
+
+    colors: Object;
+
+    constructor(props) {
+        super(props);
+        this.colors = props.theme.colors;
+    }
+
+    render() {
         return (
-        <View style={{
+            <View
+                style={{
                     flex: 1,
-            backgroundColor: props.color,
+                    backgroundColor: this.props.color,
-            borderColor: props.isEmpty ? props.color : "#393939",
+                    borderColor: this.props.isEmpty ? this.props.color : "#393939",
                     borderStyle: 'solid',
                     borderWidth: 1,
                     aspectRatio: 1,
-        }}/>
+                }}
+            />
         );
+    }
+
+
 }
 
 export default withTheme(Cell);

screens/Tetris/components/Grid.js

@@ -25,7 +25,8 @@ class Grid extends React.Component<Props>{
         let cells = [];
         for (let i = 0; i < this.props.width; i++) {
             let cell = this.props.grid[rowNumber][i];
-            cells.push(<Cell color={cell.color} isEmpty={cell.isEmpty}/>);
+            let key = rowNumber + ':' + i;
+            cells.push(<Cell color={cell.color} isEmpty={cell.isEmpty} id={key}/>);
         }
         return(
             <View style={{