Optimization performance for Cell, Counter, Reset

nickovchinnikov · Oct 4, 2021 · dc11701 · dc11701
1 parent 7ececba
commit dc11701
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 59 deletions.
diff --git a/src/components/Grid/Cell.test.tsx b/src/components/Grid/Cell.test.tsx
@@ -1,21 +1,22 @@
 import React from 'react';
 import { render, screen, fireEvent, createEvent } from '@testing-library/react';
 
-import { CellState, Coords } from '@/core/Field';
+import { CellState, Cell as CellType, Coords } from '@/core/Field';
 
-import { Cell, ClosedFrame, isActiveCell } from './Cell';
+import { Cell, ClosedFrame, isActiveCell, areEqual } from './Cell';
 
 describe('Cell component check', () => {
   const coords: Coords = [1, 1];
+  const props = {
+    coords,
+    flagCounter: 0,
+    bombs: 10,
+    onClick: jest.fn(),
+    onContextMenu: jest.fn(),
+  };
 
   for (let cell = CellState.empty; cell <= CellState.weakFlag; cell++) {
     it('Cell renders correct', () => {
-      const props = {
-        coords,
-        onClick: jest.fn(),
-        onContextMenu: jest.fn(),
-      };
-
       const { asFragment } = render(<Cell {...props}>{cell}</Cell>);
 
       expect(asFragment()).toMatchSnapshot();
@@ -25,12 +26,6 @@ describe('Cell component check', () => {
       expect(asFragment()).toMatchSnapshot();
     });
     it('Check prevent default contextMenu for every type of cell', () => {
-      const props = {
-        coords,
-        onClick: jest.fn(),
-        onContextMenu: jest.fn(),
-      };
-
       render(<Cell {...props}>{cell}</Cell>);
 
       const cellComp = screen.getByTestId(`${coords}`);
@@ -42,12 +37,6 @@ describe('Cell component check', () => {
     });
 
     it('onClick and onContextMenu handler should be called for active cells', () => {
-      const props = {
-        coords,
-        onClick: jest.fn(),
-        onContextMenu: jest.fn(),
-      };
-
       render(<Cell {...props}>{cell}</Cell>);
 
       const cellComp = screen.getByTestId(`${coords}`);
@@ -64,4 +53,27 @@ describe('Cell component check', () => {
       }
     });
   }
+  it('Check areEqual', () => {
+    const prevProps = {
+      ...props,
+      children: 0 as CellType,
+    };
+
+    expect(areEqual(prevProps, { ...prevProps })).toBe(true);
+
+    expect(areEqual(prevProps, { ...prevProps, coords: [2, 1] })).toBe(false);
+    expect(areEqual(prevProps, { ...prevProps, coords: [1, 2] })).toBe(false);
+    expect(areEqual(prevProps, { ...prevProps, coords: [2, 2] })).toBe(false);
+    expect(areEqual(prevProps, { ...prevProps, coords: [1, 0] })).toBe(false);
+
+    expect(areEqual(prevProps, { ...prevProps, children: 1 as CellType })).toBe(
+      false
+    );
+    expect(areEqual(prevProps, { ...prevProps, onClick: jest.fn() })).toBe(
+      false
+    );
+    expect(
+      areEqual(prevProps, { ...prevProps, onContextMenu: jest.fn() })
+    ).toBe(false);
+  });
 });
diff --git a/src/components/Grid/Cell.tsx b/src/components/Grid/Cell.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import styled from '@emotion/styled';
 
 import { Cell as CellType, Coords, CellState } from '@/core/Field';
@@ -27,7 +27,23 @@ export interface CellProps {
 export const isActiveCell = (cell: CellType): boolean =>
   [CellState.hidden, CellState.flag, CellState.weakFlag].includes(cell);
 
-export const Cell: FC<CellProps> = ({ children, coords, ...rest }) => {
+export const areEqual = (
+  prevProps: CellProps,
+  nextProps: CellProps
+): boolean => {
+  const areEqualCoords =
+    prevProps.coords.filter((coord, idx) => nextProps.coords[idx] !== coord)
+      .length === 0;
+
+  return (
+    prevProps.children === nextProps.children &&
+    areEqualCoords &&
+    prevProps.onClick === nextProps.onClick &&
+    prevProps.onContextMenu === nextProps.onContextMenu
+  );
+};
+
+export const Cell: FC<CellProps> = memo(({ children, coords, ...rest }) => {
   const [mouseDown, onMouseDown, onMouseUp] = useMouseDown();
 
   const onClick = () => rest.onClick(coords);
@@ -55,7 +71,9 @@ export const Cell: FC<CellProps> = ({ children, coords, ...rest }) => {
   };
 
   return <ComponentsMap {...props}>{children}</ComponentsMap>;
-};
+}, areEqual);
+
+Cell.displayName = 'Cell';
 
 interface ComponentsMapProps {
   children: CellType;

diff --git a/src/components/Scoreboard/Counter.tsx b/src/components/Scoreboard/Counter.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import styled from '@emotion/styled';
 
 export interface CounterProps {
@@ -8,9 +8,11 @@ export interface CounterProps {
   children: string;
 }
 
-export const Counter: FC<CounterProps> = ({ children }) => (
+export const Counter: FC<CounterProps> = memo(({ children }) => (
   <Frame>{children}</Frame>
-);
+));
+
+Counter.displayName = 'Counter';
 
 const Frame = styled.div`
   display: inline-block;

diff --git a/src/components/Scoreboard/Reset.tsx b/src/components/Scoreboard/Reset.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import styled from '@emotion/styled';
 
 import { useMouseDown } from '@/components/hooks/useMouseDown';
@@ -10,7 +10,7 @@ export interface ResetProps {
   onReset: () => void;
 }
 
-export const Reset: FC<ResetProps> = ({ onReset }) => {
+export const Reset: FC<ResetProps> = memo(({ onReset }) => {
   const [mouseDown, onMouseDown, onMouseUp] = useMouseDown();
 
   return (
@@ -23,7 +23,9 @@ export const Reset: FC<ResetProps> = ({ onReset }) => {
       {mouseDown ? '😯' : '🙂'}
     </Button>
   );
-};
+});
+
+Reset.displayName = 'Reset';
 
 const Button = styled.button`
   font-size: 1.1vw;

diff --git a/src/modules/GameWithHooks/useGame.ts b/src/modules/GameWithHooks/useGame.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 
 import {
   Field,
@@ -61,39 +61,45 @@ export const useGame = (): ReturnType => {
     fieldGenerator(size, bombs / (size * size))
   );
 
-  const onClick = (coords: Coords) => {
-    !isGameStarted && setInProgress();
-    try {
-      const [newPlayerField, isSolved] = openCell(
+  const onClick = useCallback(
+    (coords: Coords) => {
+      !isGameStarted && setInProgress();
+      try {
+        const [newPlayerField, isSolved] = openCell(
+          coords,
+          playerField,
+          gameField
+        );
+        if (isSolved) {
+          setGameWin();
+        }
+        setPlayerField([...newPlayerField]);
+      } catch (e) {
+        setPlayerField([...gameField]);
+        setGameLoose();
+      }
+    },
+    [isGameStarted, isGameOver, isWin, level, flagCounter]
+  );
+
+  const onContextMenu = useCallback(
+    (coords: Coords) => {
+      !isGameStarted && setInProgress();
+      const [newPlayerField, isSolved, newFlagCounter] = setFlag(
         coords,
         playerField,
-        gameField
+        gameField,
+        flagCounter,
+        bombs
       );
+      setFlagCounter(newFlagCounter);
       if (isSolved) {
         setGameWin();
       }
       setPlayerField([...newPlayerField]);
-    } catch (e) {
-      setPlayerField([...gameField]);
-      setGameLoose();
-    }
-  };
-
-  const onContextMenu = (coords: Coords) => {
-    !isGameStarted && setInProgress();
-    const [newPlayerField, isSolved, newFlagCounter] = setFlag(
-      coords,
-      playerField,
-      gameField,
-      flagCounter,
-      bombs
-    );
-    setFlagCounter(newFlagCounter);
-    if (isSolved) {
-      setGameWin();
-    }
-    setPlayerField([...newPlayerField]);
-  };
+    },
+    [isGameStarted, isGameOver, isWin, level, flagCounter]
+  );
 
   const resetHandler = ([size, bombs]: [number, number]) => {
     const newGameField = fieldGenerator(size, bombs / (size * size));
@@ -109,12 +115,12 @@ export const useGame = (): ReturnType => {
     setFlagCounter(0);
   };
 
-  const onChangeLevel = (level: LevelNames) => {
+  const onChangeLevel = useCallback((level: LevelNames) => {
     const newSettings = setLevel(level);
     resetHandler(newSettings);
-  };
+  }, []);
 
-  const onReset = () => resetHandler([size, bombs]);
+  const onReset = useCallback(() => resetHandler([size, bombs]), [size, bombs]);
 
   return {
     level,