Add fitness graph

src/apps/SnakeAI/SnakeCanvas.tsx

@@ -24,6 +24,11 @@ export default function SnakeCanvas({ network, gridSize, showGrid = true, size =
     const [currentGame, setCurrentGame] = useState<GameState | null>(null);
     const animationFrameRef = useRef<number>();
     const lastUpdateRef = useRef<number>(0);
+    const networkRef = useRef(network);
+
+    useEffect(() => {
+        networkRef.current = network;
+    }, [network]);
 
     const CELL_SIZE = CELL_SIZES[size];
 
@@ -32,7 +37,7 @@ export default function SnakeCanvas({ network, gridSize, showGrid = true, size =
         if (network) {
             setCurrentGame(createGame(gridSize));
         }
-    }, [network, gridSize]);
+    }, [network?.id, gridSize]);
 
     // Animation loop to step through game
     useEffect(() => {
@@ -54,8 +59,11 @@ export default function SnakeCanvas({ network, gridSize, showGrid = true, size =
                     }
 
                     // Get neural network decision
+                    const currentNetwork = networkRef.current;
+                    if (!currentNetwork) return prevGame;
+
                     const inputs = getInputs(prevGame);
-                    const action = getAction(network, inputs);
+                    const action = getAction(currentNetwork, inputs);
 
                     // Step the game forward
                     return step(prevGame, action);
@@ -74,7 +82,7 @@ export default function SnakeCanvas({ network, gridSize, showGrid = true, size =
                 cancelAnimationFrame(animationFrameRef.current);
             }
         };
-    }, [network, currentGame, gridSize]);
+    }, [network?.id, !!currentGame, gridSize]); // Use ID and boolean existence check to prevent loop restart on every frame
 
     // Set canvas size once when props change (not on every render)
     useEffect(() => {