fix : board perf optimization

src/components/board/index.tsx

@@ -10,7 +10,7 @@ import {
   Square,
 } from "react-chessboard/dist/chessboard/types";
 import { useChessActions } from "@/hooks/useChessActions";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { Color, MoveClassification } from "@/types/enums";
 import { Chess } from "chess.js";
 import { getSquareRenderer } from "./squareRenderer";
@@ -64,10 +64,11 @@ export default function Board({
   const boardHue = useAtomValue(boardHueAtom);
 
   const gameFen = game.fen();
-
+  const [previousFen, setPreviousFen] = useState(gameFen);
-  useEffect(() => {
+  if (gameFen !== previousFen) {
+    setPreviousFen(gameFen);
     setClickedSquares([]);
-  }, [gameFen, setClickedSquares]);
+  }
 
   const isPiecePlayable = useCallback(
     ({ piece }: { piece: string }): boolean => {
@@ -78,11 +79,8 @@ export default function Board({
     [canPlay, game]
   );
 
-  const onPieceDrop = (
+  const onPieceDrop = useCallback(
-    source: Square,
+    (source: Square, target: Square, piece: string): boolean => {
-    target: Square,
-    piece: string
-  ): boolean => {
       if (!isPiecePlayable({ piece })) return false;
 
       const result = playMove({
@@ -92,9 +90,12 @@ export default function Board({
       });
 
       return !!result;
-  };
+    },
+    [isPiecePlayable, playMove]
+  );
 
-  const resetMoveClick = (square?: Square | null) => {
+  const resetMoveClick = useCallback(
+    (square?: Square | null) => {
       setMoveClickFrom(square ?? null);
       setMoveClickTo(null);
       setShowPromotionDialog(false);
@@ -104,9 +105,12 @@ export default function Board({
       } else {
         setPlayableSquares([]);
       }
-  };
+    },
+    [setMoveClickFrom, setMoveClickTo, setPlayableSquares, game]
+  );
 
-  const handleSquareLeftClick = (square: Square, piece?: string) => {
+  const handleSquareLeftClick = useCallback(
+    (square: Square, piece?: string) => {
       setClickedSquares([]);
 
       if (!moveClickFrom) {
@@ -140,29 +144,41 @@ export default function Board({
       });
 
       resetMoveClick(result ? undefined : square);
-  };
+    },
+    [
+      game,
+      isPiecePlayable,
+      moveClickFrom,
+      playMove,
+      resetMoveClick,
+      setClickedSquares,
+    ]
+  );
 
-  const handleSquareRightClick = (square: Square) => {
+  const handleSquareRightClick = useCallback(
+    (square: Square) => {
       setClickedSquares((prev) =>
         prev.includes(square)
           ? prev.filter((s) => s !== square)
           : [...prev, square]
       );
-  };
+    },
+    [setClickedSquares]
+  );
 
-  const handlePieceDragBegin = (_: string, square: Square) => {
+  const handlePieceDragBegin = useCallback(
+    (_: string, square: Square) => {
       resetMoveClick(square);
-  };
+    },
+    [resetMoveClick]
+  );
 
-  const handlePieceDragEnd = () => {
+  const handlePieceDragEnd = useCallback(() => {
     resetMoveClick();
-  };
+  }, [resetMoveClick]);
 
-  const onPromotionPieceSelect = (
+  const onPromotionPieceSelect = useCallback(
-    piece?: PromotionPieceOption,
+    (piece?: PromotionPieceOption, from?: Square, to?: Square) => {
-    from?: Square,
-    to?: Square
-  ) => {
       if (!piece) return false;
       const promotionPiece = piece[1]?.toLowerCase() ?? "q";
 
@@ -188,7 +204,9 @@ export default function Board({
 
       resetMoveClick(moveClickFrom);
       return false;
-  };
+    },
+    [moveClickFrom, moveClickTo, playMove, resetMoveClick]
+  );
 
   const customArrows: Arrow[] = useMemo(() => {
     const bestMove = position?.lastEval?.bestMove;
@@ -249,6 +267,22 @@ export default function Board({
     [pieceSet]
   );
 
+  const customBoardStyle = useMemo(() => {
+    const commonBoardStyle = {
+      borderRadius: "5px",
+      boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
+    };
+
+    if (boardHue) {
+      return {
+        ...commonBoardStyle,
+        filter: `hue-rotate(${boardHue}deg)`,
+      };
+    }
+
+    return commonBoardStyle;
+  }, [boardHue]);
+
   return (
     <Grid
       container
@@ -293,11 +327,7 @@ export default function Board({
             boardOrientation={
               boardOrientation === Color.White ? "white" : "black"
             }
-            customBoardStyle={{
+            customBoardStyle={customBoardStyle}
-              borderRadius: "5px",
-              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
-              filter: `hue-rotate(${boardHue}deg)`,
-            }}
             customArrows={customArrows}
             isDraggablePiece={isPiecePlayable}
             customSquare={SquareRenderer}

src/components/board/squareRenderer.tsx

@@ -2,7 +2,7 @@ import { CurrentPosition } from "@/types/eval";
 import { MoveClassification } from "@/types/enums";
 import { PrimitiveAtom, atom, useAtomValue } from "jotai";
 import Image from "next/image";
-import { CSSProperties, forwardRef } from "react";
+import { CSSProperties, forwardRef, useMemo } from "react";
 import {
   CustomSquareProps,
   Square,
@@ -36,15 +36,21 @@ export function getSquareRenderer({
       const toSquare = position.lastMove?.to;
       const moveClassification = position?.eval?.moveClassification;
 
-      const highlightSquareStyle: CSSProperties | undefined =
+      const highlightSquareStyle: CSSProperties | undefined = useMemo(
+        () =>
           clickedSquares.includes(square)
             ? rightClickSquareStyle
             : fromSquare === square || toSquare === square
               ? previousMoveSquareStyle(moveClassification)
-            : undefined;
+              : undefined,
+        [clickedSquares, square, fromSquare, toSquare, moveClassification]
+      );
 
-      const playableSquareStyle: CSSProperties | undefined =
+      const playableSquareStyle: CSSProperties | undefined = useMemo(
-        playableSquares.includes(square) ? playableSquareStyles : undefined;
+        () =>
+          playableSquares.includes(square) ? playableSquareStyles : undefined,
+        [playableSquares, square]
+      );
 
       return (
         <div
@@ -52,7 +58,7 @@ export function getSquareRenderer({
           style={{
             ...style,
             position: "relative",
-            filter: `hue-rotate(-${boardHue}deg)`,
+            filter: boardHue ? `hue-rotate(-${boardHue}deg)` : undefined,
           }}
         >
           {children}