From 22a4d2bb38bda0bc34459e03920c9c27b620e4b2 Mon Sep 17 00:00:00 2001
From: robertcrockett <robertwcrockett@hotmail.com>
Date: Thu, 27 Mar 2025 20:35:46 -0400
Subject: [PATCH] Improve Cell.jsx Component

---
 src/components/Cell.jsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Cell.jsx b/src/components/Cell.jsx
index 68b6475..bead064 100644
--- a/src/components/Cell.jsx
+++ b/src/components/Cell.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import PropTypes from "prop-types";
 
 /**
@@ -9,6 +9,10 @@ import PropTypes from "prop-types";
  * @returns A JSX button object representing a Cell.
  */
 function Cell({ cellStatus, cellValue, onClick }) {
+  const handleClick = useCallback(() => {
+    onClick(cellValue, cellStatus(cellValue));
+  }, [cellValue, cellStatus, onClick]);
+
   return (
     <button
       className='cell'
@@ -17,7 +21,8 @@ function Cell({ cellStatus, cellValue, onClick }) {
         width: "20%",
         backgroundColor: colors[cellStatus(cellValue)],
       }}
-      onClick={() => onClick(cellValue, cellStatus(cellValue))}
+      onClick={handleClick}
+      title={`Cell ${cellValue} is ${cellStatus(cellValue)}`}
     ></button>
   );
 }