fix: react-doctor rerender-state-only-in-handlers 37→5 (ref for handler-only state in QRScanModal, HeroSection, MessageLogPanel, FsmaReportModal, SettingsSections, TimeTrackingSettingsClient, OrderEditForm, ProductFormModal, ProductsClient, CampaignComposerPage, MatchingCustomersPanel, SegmentBuilderPanel, MessageCustomersSection, ShippingSettingsForm, StopEditForm, StopTableClient, TimeTrackingFieldClient, WaterFieldClient, UsersPage, LotCreateModal, LotDetailPanel, WholesaleClient, ContactImportForm, AdminOrdersPanel, TuxedoPage)

src/components/water/WaterFieldClient.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image";
-import { useState, useEffect, Suspense, useMemo, useEffectEvent } from "react";
+import { useState, useEffect, Suspense, useMemo, useEffectEvent, useRef } from "react";
 import {
   verifyWaterPin,
   submitWaterEntry,
@@ -146,7 +146,7 @@ function WaterFieldInner() {
   const [success, setSuccess] = useState(false);
 
   // Photo state
-  const [photoFile, setPhotoFile] = useState<File | null>(null);
+  const photoFileRef = useRef<File | null>(null);
   const [photoPreview, setPhotoPreview] = useState<string | null>(null);
 
   // GPS state
@@ -256,14 +256,14 @@ function WaterFieldInner() {
       setError("Only JPG or PNG photos allowed");
       return;
     }
-    setPhotoFile(file);
+    photoFileRef.current = file;
     const reader = new FileReader();
     reader.onload = (ev) => setPhotoPreview(ev.target?.result as string);
     reader.readAsDataURL(file);
   }
 
   function removePhoto() {
-    setPhotoFile(null);
+    photoFileRef.current = null;
     setPhotoPreview(null);
   }
 
@@ -274,9 +274,9 @@ function WaterFieldInner() {
     setError("");
 
     let photoUrl: string | undefined;
-    if (photoFile) {
+    if (photoFileRef.current) {
       const formData = new FormData();
-      formData.append("file", photoFile);
+      formData.append("file", photoFileRef.current);
       formData.append("bucket", "water-log-photos");
       try {
         const uploadRes = await fetch("/api/water-photo-upload", {
@@ -318,7 +318,7 @@ function WaterFieldInner() {
     setSuccess(true);
     setMeasurement("");
     setNotes("");
-    setPhotoFile(null);
+    photoFileRef.current = null;
     setPhotoPreview(null);
     setLatitude(null);
     setLongitude(null);
@@ -337,7 +337,7 @@ function WaterFieldInner() {
     setSelectedHeadgate("");
     setMeasurement("");
     setNotes("");
-    setPhotoFile(null);
+    photoFileRef.current = null;
     setPhotoPreview(null);
     setLatitude(null);
     setLongitude(null);