From b92eec3f2dce6a859d19eb07cebcc70dd88fb883 Mon Sep 17 00:00:00 2001
From: Malcolm Fell <emarref@users.noreply.github.com>
Date: Mon, 29 Sep 2025 17:24:55 +1300
Subject: [PATCH] Better hint performance

---
 src/components/game/variant-header.tsx |  1 -
 src/lib/state.ts                       | 72 +++++++++++++++-----------
 2 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/src/components/game/variant-header.tsx b/src/components/game/variant-header.tsx
index a45068d..90d9f8e 100644
--- a/src/components/game/variant-header.tsx
+++ b/src/components/game/variant-header.tsx
@@ -29,7 +29,6 @@ export function VariantHeader({ orientation, index, variant }: Props) {
   const boardHints = groupByValue(boardRow, variant);
   const sessionRow = useSessionSubset(dir, index);
   const sessionHints = groupByValue(sessionRow, variant);
-  // TODO This re-renders way too much because of the selectAtom
 
   const result =
     sessionRow.toString() === boardRow.toString()
diff --git a/src/lib/state.ts b/src/lib/state.ts
index 8f5f73a..0c90eab 100644
--- a/src/lib/state.ts
+++ b/src/lib/state.ts
@@ -104,42 +104,50 @@ export const preferencesAtom = atom(
 );
 
 export const selectBoardSubset = (dir: "row" | "col", index: number) =>
-  selectAtom(boardMatrixAtom, (board) => {
-    if (dir === "row") {
-      const row = board[index];
-      if (typeof row === "undefined") {
-        throw new Error(`No board ${dir} at index ${index}`);
-      }
-      return row;
-    } else {
-      return board.map((row) => {
-        const col = row[index];
-        if (typeof col === "undefined") {
+  selectAtom(
+    boardMatrixAtom,
+    (board) => {
+      if (dir === "row") {
+        const row = board[index];
+        if (typeof row === "undefined") {
           throw new Error(`No board ${dir} at index ${index}`);
         }
-        return col;
-      });
-    }
-  });
+        return row;
+      } else {
+        return board.map((row) => {
+          const col = row[index];
+          if (typeof col === "undefined") {
+            throw new Error(`No board ${dir} at index ${index}`);
+          }
+          return col;
+        });
+      }
+    },
+    arraysAreEqual,
+  );
 
 export const selectSessionSubset = (dir: "row" | "col", index: number) =>
-  selectAtom(sessionMatrixAtom, (session) => {
-    if (dir === "row") {
-      const row = session[index];
-      if (typeof row === "undefined") {
-        throw new Error(`No session ${dir} at index ${index}`);
-      }
-      return row;
-    } else {
-      return session.map((row) => {
-        const col = row[index];
-        if (typeof col === "undefined") {
+  selectAtom(
+    sessionMatrixAtom,
+    (session) => {
+      if (dir === "row") {
+        const row = session[index];
+        if (typeof row === "undefined") {
           throw new Error(`No session ${dir} at index ${index}`);
         }
-        return col;
-      });
-    }
-  });
+        return row;
+      } else {
+        return session.map((row) => {
+          const col = row[index];
+          if (typeof col === "undefined") {
+            throw new Error(`No session ${dir} at index ${index}`);
+          }
+          return col;
+        });
+      }
+    },
+    arraysAreEqual,
+  );
 
 export const selectGuessAt = (index: number) =>
   selectAtom(sessionAtom, (cells) => {
@@ -163,3 +171,7 @@ export function selectVariantAt(index: number) {
 function generateBoard(size: number, entropy: number) {
   return arrayOfSize(size).map(() => Math.floor(Math.random() * entropy));
 }
+
+function arraysAreEqual(a: number[], b: number[]) {
+  return a.toString() === b.toString();
+}
-- 
2.51.2