more perf improvements

package.json

@@ -70,7 +70,7 @@
     "react-i18next": "^14.1.0",
     "react-markdown": "^9.0.1",
     "react-mosaic-component": "^6.1.0",
-    "recharts": "^2.12.2",
+    "recharts": "^2.14.1",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "swr": "^2.2.5",

src/components/boards/Board.tsx

@@ -182,10 +182,7 @@ function Board({
   const [pendingMove, setPendingMove] = useState<NormalMove | null>(null);
 
   const turn = pos?.turn || "white";
-  const orientation =
-    movable === "white" || movable === "black"
-      ? movable
-      : headers.orientation || "white";
+  const orientation = headers.orientation || "white";
   const toggleOrientation = () =>
     setHeaders({
       ...headers,

src/components/boards/BoardAnalysis.tsx

@@ -48,13 +48,7 @@ function BoardAnalysis() {
 
   const store = useContext(TreeStateContext)!;
 
-  const rootFen = useStore(store, (s) => s.root.fen);
-  const is960 = useStore(store, (s) => s.headers.variant === "Chess960");
   const dirty = useStore(store, (s) => s.dirty);
-  const moves = useStore(
-    store,
-    useShallow((s) => getVariationLine(s.root, s.position, is960)),
-  );
 
   const reset = useStore(store, (s) => s.reset);
   const clearShapes = useStore(store, (s) => s.clearShapes);
@@ -133,7 +127,7 @@ function BoardAnalysis() {
 
   return (
     <>
-      <EvalListener fen={rootFen} moves={moves} chess960={is960} />
+      <EvalListener />
       <Portal target="#left" style={{ height: "100%" }}>
         <Board
           practicing={practicing}

src/components/boards/BoardGame.tsx

@@ -34,6 +34,7 @@ import {
 } from "@tabler/icons-react";
 import { parseUci } from "chessops";
 import { INITIAL_FEN } from "chessops/fen";
+import equal from "fast-deep-equal";
 import { useAtom, useAtomValue } from "jotai";
 import {
   Suspense,
@@ -408,7 +409,7 @@ function BoardGame() {
         payload.engine === pos?.turn &&
         payload.tab === activeTab + pos.turn &&
         payload.fen === root.fen &&
-        payload.moves.join(",") === moves.join(",") &&
+        equal(payload.moves, moves) &&
         !pos?.isEnd()
       ) {
         appendMove({

src/components/boards/EvalListener.tsx

@@ -19,23 +19,26 @@ import { getBestMoves as lichessGetBestMoves } from "@/utils/lichess/api";
 import { useThrottledEffect } from "@/utils/misc";
 import { parseUci } from "chessops";
 import { INITIAL_FEN, makeFen } from "chessops/fen";
+import equal from "fast-deep-equal";
 import { useAtom, useAtomValue } from "jotai";
 import { startTransition, useContext, useEffect, useMemo } from "react";
 import { match } from "ts-pattern";
 import { useStore } from "zustand";
 import { TreeStateContext } from "../common/TreeStateContext";
+import { getVariationLine } from "@/utils/chess";
+import { useShallow } from "zustand/react/shallow";
 
-function EvalListener({
-  fen,
-  moves,
-  chess960,
-}: {
-  fen: string;
-  moves: string[];
-  chess960: boolean;
-}) {
+function EvalListener() {
   const [engines] = useAtom(enginesAtom);
   const threat = useAtomValue(currentThreatAtom);
+  const store = useContext(TreeStateContext)!;
+  const is960 = useStore(store, (s) => s.headers.variant === "Chess960");
+  const fen = useStore(store, (s) => s.root.fen);
+
+  const moves = useStore(
+    store,
+    useShallow((s) => getVariationLine(s.root, s.position, is960)),
+  );
 
   const [pos, error] = positionFromFen(fen);
   if (pos) {
@@ -78,7 +81,7 @@ function EvalListener({
       fen={fen}
       moves={moves}
       threat={threat}
-      chess960={chess960}
+      chess960={is960}
     />
   ));
 }
@@ -131,7 +134,7 @@ function EngineListener({
         payload.engine === engine.name &&
         payload.tab === activeTab &&
         payload.fen === searchingFen &&
-        payload.moves.join(",") === searchingMoves.join(",") &&
+        equal(payload.moves, searchingMoves) &&
         settings.enabled &&
         !isGameOver
       ) {

src/components/common/CompleteMoveCell.tsx

@@ -4,7 +4,7 @@ import type { Annotation } from "@/utils/annotation";
 import { hasMorePriority, stripClock } from "@/utils/chess";
 import { type TreeNode, treeIterator } from "@/utils/treeReducer";
 import { ActionIcon, Box, Menu, Portal, Tooltip } from "@mantine/core";
-import { shallowEqual, useClickOutside } from "@mantine/hooks";
+import { useClickOutside } from "@mantine/hooks";
 import {
   IconArrowsJoin,
   IconChevronUp,
@@ -13,6 +13,7 @@ import {
   IconFlag,
   IconX,
 } from "@tabler/icons-react";
+import equal from "fast-deep-equal";
 import { useAtomValue } from "jotai";
 import { memo, useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -171,12 +172,12 @@ export default memo(CompleteMoveCell, (prev, next) => {
     prev.move === next.move &&
     prev.fen === next.fen &&
     prev.comment === next.comment &&
-    shallowEqual(prev.annotations, next.annotations) &&
+    equal(prev.annotations, next.annotations) &&
     prev.showComments === next.showComments &&
     prev.first === next.first &&
     prev.isCurrentVariation === next.isCurrentVariation &&
     prev.isStart === next.isStart &&
-    shallowEqual(prev.movePath, next.movePath) &&
+    equal(prev.movePath, next.movePath) &&
     prev.halfMoves === next.halfMoves
   );
 });

src/components/common/GameNotation.tsx

@@ -15,7 +15,7 @@ import {
   Text,
   Tooltip,
 } from "@mantine/core";
-import { shallowEqual, useColorScheme, useToggle } from "@mantine/hooks";
+import { useColorScheme, useToggle } from "@mantine/hooks";
 import {
   IconArrowRight,
   IconArrowsSplit,
@@ -27,6 +27,7 @@ import {
   IconPlus,
 } from "@tabler/icons-react";
 import { INITIAL_FEN } from "chessops/fen";
+import equal from "fast-deep-equal";
 import { useAtom, useAtomValue } from "jotai";
 import { memo, useContext, useEffect, useRef, useState } from "react";
 import React from "react";
@@ -211,14 +212,11 @@ const RenderVariationTree = memo(
               fen={variation.fen}
               movePath={[...path, variations.indexOf(variation)]}
               showComments={showComments}
-              isCurrentVariation={shallowEqual(
+              isCurrentVariation={equal(
                 [...path, variations.indexOf(variation)],
                 currentPath,
               )}
-              isStart={shallowEqual(
-                [...path, variations.indexOf(variation)],
-                start,
-              )}
+              isStart={equal([...path, variations.indexOf(variation)], start)}
               first
             />
             <RenderVariationTree
@@ -234,6 +232,7 @@ const RenderVariationTree = memo(
           </React.Fragment>
         ))
       : [];
+    const newPath = [...path, 0];
 
     return (
       <>
@@ -245,10 +244,10 @@ const RenderVariationTree = memo(
             halfMoves={variations[0].halfMoves}
             move={variations[0].san}
             fen={variations[0].fen}
-            movePath={[...path, 0]}
+            movePath={newPath}
             showComments={showComments}
-            isCurrentVariation={shallowEqual([...path, 0], currentPath)}
-            isStart={shallowEqual([...path, 0], start)}
+            isCurrentVariation={equal(newPath, currentPath)}
+            isStart={equal(newPath, start)}
             first={first}
           />
         )}
@@ -263,7 +262,7 @@ const RenderVariationTree = memo(
             showVariations={showVariations}
             start={start}
             showComments={showComments}
-            path={[...path, 0]}
+            path={newPath}
           />
         )}
       </>
@@ -276,8 +275,8 @@ const RenderVariationTree = memo(
       prev.first === next.first &&
       prev.showVariations === next.showVariations &&
       prev.showComments === next.showComments &&
-      shallowEqual(prev.path, next.path) &&
-      shallowEqual(prev.start, next.start)
+      equal(prev.path, next.path) &&
+      equal(prev.start, next.start)
     );
   },
 );

src/components/panels/analysis/ReportPanel.tsx

@@ -6,9 +6,10 @@ import { activeTabAtom } from "@/state/atoms";
 import { ANNOTATION_INFO, isBasicAnnotation } from "@/utils/annotation";
 import { getGameStats, getMainLine } from "@/utils/chess";
 import { Grid, Group, Paper, ScrollArea, Stack, Text } from "@mantine/core";
-import { shallowEqual, useToggle } from "@mantine/hooks";
+import { useToggle } from "@mantine/hooks";
 import { IconZoomCheck } from "@tabler/icons-react";
 import cx from "clsx";
+import equal from "fast-deep-equal";
 import { useAtomValue } from "jotai";
 import React, { Suspense, useState } from "react";
 import { memo, useContext, useMemo } from "react";
@@ -152,8 +153,8 @@ const GameStats = memo(
   },
   (prev, next) => {
     return (
-      shallowEqual(prev.whiteAnnotations, next.whiteAnnotations) &&
-      shallowEqual(prev.blackAnnotations, next.blackAnnotations)
+      equal(prev.whiteAnnotations, next.whiteAnnotations) &&
+      equal(prev.blackAnnotations, next.blackAnnotations)
     );
   },
 );

src/components/tabs/NewTabHome.tsx

@@ -6,8 +6,8 @@ import { useAtom } from "jotai";
 import { useState } from "react";
 import ImportModal from "./ImportModal";
 
-import { useTranslation } from "react-i18next";
 import { IconChess, IconFileImport, IconPuzzle } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
 import Chessboard from "../icons/Chessboard";
 
 export default function NewTabHome({ id }: { id: string }) {