more efficient gamenotation memoization

franciscoBSalgueiro · Dec 7, 2024 · f07a134 · f07a134
1 parent 4e8d10b
commit f07a134
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 43 deletions.
diff --git a/src/components/common/CompleteMoveCell.tsx b/src/components/common/CompleteMoveCell.tsx
@@ -46,7 +46,6 @@ function CompleteMoveCell({
   annotations,
   showComments,
   first,
-  isCurrentVariation,
   isStart,
   targetRef,
 }: {
@@ -57,12 +56,14 @@ function CompleteMoveCell({
   move?: string | null;
   fen?: string;
   first?: boolean;
-  isCurrentVariation: boolean;
   isStart: boolean;
   movePath: number[];
   targetRef: React.RefObject<HTMLSpanElement>;
 }) {
   const store = useContext(TreeStateContext)!;
+  const isCurrentVariation = useStore(store, (s) =>
+    equal(s.position, movePath),
+  );
   const root = useStore(store, (s) => s.root);
   const goToMove = useStore(store, (s) => s.goToMove);
   const deleteMove = useStore(store, (s) => s.deleteMove);
@@ -175,7 +176,6 @@ export default memo(CompleteMoveCell, (prev, next) => {
     equal(prev.annotations, next.annotations) &&
     prev.showComments === next.showComments &&
     prev.first === next.first &&
-    prev.isCurrentVariation === next.isCurrentVariation &&
     prev.isStart === next.isStart &&
     equal(prev.movePath, next.movePath) &&
     prev.halfMoves === next.halfMoves

diff --git a/src/components/common/GameNotation.tsx b/src/components/common/GameNotation.tsx
@@ -40,16 +40,15 @@ import OpeningName from "./OpeningName";
 function GameNotation({ topBar }: { topBar?: boolean }) {
   const store = useContext(TreeStateContext)!;
   const root = useStore(store, (s) => s.root);
-  const position = useStore(store, (s) => s.position);
+  const currentFen = useStore(store, (s) => s.currentNode().fen);
   const headers = useStore(store, (s) => s.headers);
-  const currentNode = getNodeAtPath(root, position);
 
   const viewport = useRef<HTMLDivElement>(null);
   const targetRef = useRef<HTMLSpanElement>(null);
 
   useEffect(() => {
     if (viewport.current) {
-      if (currentNode.fen === INITIAL_FEN) {
+      if (currentFen === INITIAL_FEN) {
         viewport.current.scrollTo({ top: 0, behavior: "smooth" });
       } else if (targetRef.current) {
         viewport.current.scrollTo({
@@ -58,7 +57,7 @@ function GameNotation({ topBar }: { topBar?: boolean }) {
         });
       }
     }
-  }, [position, currentNode.fen]);
+  }, [currentFen]);
 
   const [invisibleValue, setInvisible] = useAtom(currentInvisibleAtom);
   const invisible = topBar && invisibleValue;
@@ -197,43 +196,40 @@ const RenderVariationTree = memo(
     targetRef: React.RefObject<HTMLSpanElement>;
     path: number[];
   }) {
-    const store = useContext(TreeStateContext)!;
-    const currentPath = useStore(store, (s) => s.position);
     const variations = tree.children;
-    const moveNodes = showVariations
-      ? variations.slice(1).map((variation) => (
-          <React.Fragment key={variation.fen}>
-            <CompleteMoveCell
-              targetRef={targetRef}
-              annotations={variation.annotations}
-              comment={variation.comment}
-              halfMoves={variation.halfMoves}
-              move={variation.san}
-              fen={variation.fen}
-              movePath={[...path, variations.indexOf(variation)]}
-              showComments={showComments}
-              isCurrentVariation={equal(
-                [...path, variations.indexOf(variation)],
-                currentPath,
-              )}
-              isStart={equal([...path, variations.indexOf(variation)], start)}
-              first
-            />
-            <RenderVariationTree
-              targetRef={targetRef}
-              tree={variation}
-              depth={depth + 2}
-              first
-              showVariations={showVariations}
-              showComments={showComments}
-              start={start}
-              path={[...path, variations.indexOf(variation)]}
-            />
-          </React.Fragment>
-        ))
+    const variationNodes = showVariations
+      ? variations.slice(1).map((variation) => {
+          const newPath = [...path, variations.indexOf(variation)];
+          return (
+            <React.Fragment key={variation.fen}>
+              <CompleteMoveCell
+                targetRef={targetRef}
+                annotations={variation.annotations}
+                comment={variation.comment}
+                halfMoves={variation.halfMoves}
+                move={variation.san}
+                fen={variation.fen}
+                movePath={newPath}
+                showComments={showComments}
+                isStart={equal(newPath, start)}
+                first
+              />
+              <RenderVariationTree
+                targetRef={targetRef}
+                tree={variation}
+                depth={depth + 2}
+                first
+                showVariations={showVariations}
+                showComments={showComments}
+                start={start}
+                path={newPath}
+              />
+            </React.Fragment>
+          );
+        })
       : [];
-    const newPath = [...path, 0];
 
+    const newPath = [...path, 0];
     return (
       <>
         {variations.length > 0 && (
@@ -246,13 +242,12 @@ const RenderVariationTree = memo(
             fen={variations[0].fen}
             movePath={newPath}
             showComments={showComments}
-            isCurrentVariation={equal(newPath, currentPath)}
             isStart={equal(newPath, start)}
             first={first}
           />
         )}
 
-        <VariationCell moveNodes={moveNodes} />
+        <VariationCell moveNodes={variationNodes} />
 
         {tree.children.length > 0 && (
           <RenderVariationTree