Refactor and optimize cells component behaviour and handler

src/components/grid/cell/cell.tsx

@@ -54,7 +54,7 @@ export const areEqual = (prevProps: CellProps, nextProps: CellProps): boolean =>
   );
 };
 
-export const CellComponent: FunctionComponent<CellProps> = ({ coords, children, ...restProps }) => {
+export const CellComponent: FunctionComponent<CellProps> = React.memo(({ coords, children, ...restProps }) => {
   const [mouseDown, onMouseDown, onMouseUp] = useMouseDown();
 
   const onClick = () => restProps.onClick(coords);
@@ -82,7 +82,7 @@ export const CellComponent: FunctionComponent<CellProps> = ({ coords, children,
   };
 
   return <ComponentsMap children={children} {...props} />;
-};
+}, areEqual);
 
 export const ComponentsMap: FunctionComponent<ComponentsMapProps> = ({ children, ...rest }) => {
   const nonActiveCellProps: RevealedProps = {

src/modules/GameWithHooks/GameWithHooks.tsx

@@ -6,15 +6,15 @@ import { Top } from "@components/top-section";
 import { openCell } from "@helpers/cells/cells-manipulator";
 import { CellState, Coordinates, Field, fieldGenerator, generateFieldWithDefaultState } from "@helpers/field";
 import { GameLevels, GameSettings, LevelNames } from "@modules/GameSettings";
-import React, { FunctionComponent, useState } from "react";
+import React, { FunctionComponent, useMemo, useState } from "react";
 
 export const GameWithHooks: FunctionComponent = () => {
   const [level, setLevel] = useState<LevelNames>("beginner");
   const [size, bombs] = GameSettings[level];
 
   const [playerField, setPlayerField] = useState<Field>(generateFieldWithDefaultState(size, CellState.hidden));
 
-  const gameField = fieldGenerator(size, bombs / (size * size));
+  const gameField = useMemo(() => fieldGenerator(size, bombs / (size * size)), [size, bombs]);
 
   const onClickHandler = (coords: Coordinates) => {
     const newPlayerField = openCell(coords, playerField, gameField);