⚡ perf: extract inline array allocation in Heatmap component

benchmark.js

@@ -0,0 +1,29 @@
+const ITERATIONS = 10_000_000;
+
+function bench(name, fn) {
+  const start = performance.now();
+  let dummy = 0;
+  for (let i = 0; i < ITERATIONS; i++) {
+    dummy += fn()[0]; // Use the array to prevent dead-code elimination
+  }
+  const end = performance.now();
+  console.log(`${name}: ${end - start}ms`);
+  return dummy;
+}
+
+// Inside inline allocation
+function runInline() {
+  return [0, 0, 0, 0, 0, 0];
+}
+
+// Outside allocation
+const EMPTY_SET = [0, 0, 0, 0, 0, 0];
+function runConstant() {
+  return EMPTY_SET;
+}
+
+console.log(`Running benchmark with ${ITERATIONS.toLocaleString()} iterations...`);
+
+// We need to run them without interfering JIT behavior.
+bench("Constant Array Reference", runConstant);
+bench("Inline Array Allocation", runInline);

src/components/analytics/heatmap.tsx

@@ -56,6 +56,8 @@ const LOTTO_GAMES = [
   { id: "658", name: "Ultra Lotto 6/58", max: 58 },
 ]
 
+const EMPTY_SET = [0, 0, 0, 0, 0, 0]
+
 export function LotteryHeatmap() {
   const { toast } = useToast()
   const [lottoType, setLottoType] = React.useState("658")
@@ -402,7 +404,7 @@ export function LotteryHeatmap() {
 
             <div className="flex flex-col items-center gap-8 py-4">
               <div className="flex flex-wrap justify-center gap-4">
-                {(generatedSet.length > 0 ? generatedSet : [0, 0, 0, 0, 0, 0]).map((num, i) => {
+                {(generatedSet.length > 0 ? generatedSet : EMPTY_SET).map((num, i) => {
                   const numData = numbers.find(n => n.num === num)
                   const freq = numData?.frequency || 0
                   return (