From fe5bb300826608a2add7350bcdc94761b503ff2a Mon Sep 17 00:00:00 2001
From: Victor Garcia <Victor@structupath.ai>
Date: Thu, 18 Jun 2026 01:16:18 -0600
Subject: [PATCH] fix(react): stop calling Date.now()/new Date() during render

Two real render-purity bugs: EstimatePdf computed the estimate # from
Date.now() during render (so it changed on every re-render) and the date
likewise; ExpirationAlerts read Date.now() in render. Both now stamp once
at mount (useMemo / lazy useState). Also clears a dead eslint-disable in
ErrorBoundary and a // comment-textnode in EstimateResults.

Lint warnings 22 -> 18 (the rest are the localStorage-hydration
set-state-in-effect pattern, left for a deliberate burndown).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 components/estimator/estimate-pdf.tsx     | 22 +++++++++++++++-------
 components/estimator/estimate-results.tsx |  2 +-
 components/ui/error-boundary.tsx          |  1 -
 components/vault/expiration-alerts.tsx    |  4 +++-
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/components/estimator/estimate-pdf.tsx b/components/estimator/estimate-pdf.tsx
index 024275a..f4831c9 100644
--- a/components/estimator/estimate-pdf.tsx
+++ b/components/estimator/estimate-pdf.tsx
@@ -2,6 +2,7 @@
 
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // Copyright (C) 2026 Steel-Tech / StructuPath
+import { useMemo } from "react";
 import { Printer } from "lucide-react";
 import { formatCurrency, formatCurrencyPrecise } from "@/lib/estimator/calculate";
 import type { EstimateInput, EstimateResult } from "@/lib/types/estimator";
@@ -18,11 +19,19 @@ export function EstimatePdf({
   result,
   companyName = "IronForge Estimator",
 }: Props) {
-  const today = new Date().toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  });
+  // Stamp the date + estimate id once at mount — computing them during render
+  // is impure (the id would change on every re-render).
+  const { today, estimateId } = useMemo(() => {
+    const now = new Date();
+    return {
+      today: now.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      }),
+      estimateId: now.getTime().toString().slice(-6),
+    };
+  }, []);
   const stateData = input.state ? STATE_REGISTRY[input.state] : undefined;
 
   function handlePrint() {
@@ -52,8 +61,7 @@ export function EstimatePdf({
               <strong>Date:</strong> {today}
             </div>
             <div>
-              <strong>Estimate #:</strong> EST-
-              {Date.now().toString().slice(-6)}
+              <strong>Estimate #:</strong> EST-{estimateId}
             </div>
           </div>
         </header>
diff --git a/components/estimator/estimate-results.tsx b/components/estimator/estimate-results.tsx
index 41a1e15..324069f 100644
--- a/components/estimator/estimate-results.tsx
+++ b/components/estimator/estimate-results.tsx
@@ -34,7 +34,7 @@ export function EstimateResults({ input, result }: Props) {
         <div className="relative flex flex-col md:flex-row md:items-end justify-between gap-6">
           <div>
             <div className="text-[10px] font-mono text-text-muted tracking-[0.3em] uppercase mb-2">
-              // Total Bid Estimate
+              {"// Total Bid Estimate"}
             </div>
             <div className="font-mono font-bold text-text-primary tracking-tight">
               <span className="text-5xl md:text-6xl text-neon-cyan text-glow-cyan">
diff --git a/components/ui/error-boundary.tsx b/components/ui/error-boundary.tsx
index 104ae18..91c39b7 100644
--- a/components/ui/error-boundary.tsx
+++ b/components/ui/error-boundary.tsx
@@ -32,7 +32,6 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
   }
 
   componentDidCatch(error: Error, info: ErrorInfo) {
-    // eslint-disable-next-line no-console
     console.error("[ErrorBoundary]", error, info);
   }
 
diff --git a/components/vault/expiration-alerts.tsx b/components/vault/expiration-alerts.tsx
index 866da28..a8d5710 100644
--- a/components/vault/expiration-alerts.tsx
+++ b/components/vault/expiration-alerts.tsx
@@ -2,6 +2,7 @@
 
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // Copyright (C) 2026 Steel-Tech / StructuPath
+import { useState } from "react";
 import { AlertTriangle } from "lucide-react";
 import type { VaultDocument } from "@/lib/types/vault";
 
@@ -16,7 +17,8 @@ interface Bucket {
 }
 
 export function ExpirationAlerts({ documents }: ExpirationAlertsProps) {
-  const now = Date.now();
+  // Captured once at mount — Date.now() in render is impure.
+  const [now] = useState(() => Date.now());
   const thirty = 30 * 86_400_000;
   const seven = 7 * 86_400_000;