handlePlyChange passed as prop to useEffect is being recreated every time state changes, so wrapper in useCallback

src/components/PgnViewer.tsx

@@ -20,7 +20,7 @@ const PgnViewer = ({ gamePgn, handlePlyChange }: IProps) => {
 			scrollToMove: false,
 		});
 
-		// set initial position - TODO change onto file load
+		// set initial position - TODO change to on file load
 		// handlePlyChange({
 		// 	ply: 0,
 		// 	fen: viewerRef.current?.curData().fen,
@@ -78,7 +78,7 @@ const PgnViewer = ({ gamePgn, handlePlyChange }: IProps) => {
 				move.removeEventListener("touchstart", clickHandlerDelay);
 			});
 		};
-	}, [gamePgn]);
+	}, [gamePgn, handlePlyChange]);
 
 	return <div ref={containerRef} className="lpv-board" />;
 };

src/hooks/useChessGame.ts

@@ -1,4 +1,10 @@
-import { type ChangeEvent, useReducer, useRef, useState } from "react";
+import {
+	type ChangeEvent,
+	useCallback,
+	useReducer,
+	useRef,
+	useState,
+} from "react";
 import type { IPosition } from "#/interfaces.ts";
 import { gameReducer, initialGameState } from "#/reducers/gameReducer.ts";
 import { downloadPDF } from "#/utils/pdfUtils.ts";
@@ -17,9 +23,9 @@ export const useChessGame = () => {
 
 	const fileInputRef = useRef<HTMLInputElement | null>(null);
 
-	const handlePlyChange = ({ ply, fen }: IPosition) => {
+	const handlePlyChange = useCallback(({ ply, fen }: IPosition) => {
 		setCurrentPosition({ ply, fen });
-	};
+	}, []);
 
 	const handleSavePgn = () => {
 		const pgnString = buildPgnString(gameState);