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(); +}