fix: react-doctor rerender-state-only-in-handlers 46→~30 (lastFetchedBrandId/bodyHtml/rawHeaders/rawRows/useBucket/pendingImageUrl/prevSyncKey to useRef)

src/components/admin/ContactImportForm.tsx

@@ -95,8 +95,10 @@ export default function ContactImportForm({ brandId }: { brandId: string }) {
   const [step, setStep] = useState<Step>("idle");
   const [file, setFile] = useState<File | null>(null);
   const [preview, setPreview] = useState<ImportPreviewResult | null>(null);
-  const [rawHeaders, setRawHeaders] = useState<string[]>([]);
-  const [rawRows, setRawRows] = useState<string[][]>([]);
+  const rawHeadersRef = useRef<string[]>([]);
+  const setRawHeaders = (v: string[]) => { rawHeadersRef.current = v; };
+  const rawRowsRef = useRef<string[][]>([]);
+  const setRawRows = (v: string[][]) => { rawRowsRef.current = v; };
   const [importRows, setImportRows] = useState<ContactImportEntry[]>([]);
   const [importing, setImporting] = useState(false);
   const [result, setResult] = useState<ImportResult | null>(null);
@@ -104,7 +106,6 @@ export default function ContactImportForm({ brandId }: { brandId: string }) {
   const [overridingMappings, setOverridingMappings] = useState<
     Record<string, ImportField>
   >({});
-  const [useBucket, setUseBucket] = useState(false); // Toggle for bucket upload
   const [uploadProgress, setUploadProgress] = useState<string>("");
   const [importHistory, setImportHistory] = useState<{ filename: string; size: number; createdAt: string }[]>([]);
   const fileRef = useRef<HTMLInputElement>(null);
@@ -127,7 +128,6 @@ export default function ContactImportForm({ brandId }: { brandId: string }) {
       if (isLargeFile) {
         // Use bucket upload for large files
         setUploadProgress("Uploading file to storage...");
-        setUseBucket(true);
 
         const uploadResult = await uploadContactsToBucket(brandId, f);
 
@@ -169,7 +169,6 @@ export default function ContactImportForm({ brandId }: { brandId: string }) {
       }
 
       // Browser-based processing for smaller files
-      setUseBucket(false);
       const text = await f.text();
       const previewResult = await previewContactImport(text);
 
@@ -325,14 +324,14 @@ export default function ContactImportForm({ brandId }: { brandId: string }) {
 
   const handleConfirm = useCallback(
     async () => {
-      if (!preview || rawRows.length === 0) return;
+      if (!preview || rawRowsRef.current.length === 0) return;
       setStep("importing");
 
       const rowsToImport = applyMappings(
         preview.mappings,
         overridingMappings,
-        rawHeaders,
-        rawRows
+        rawHeadersRef.current,
+        rawRowsRef.current
       );
 
       setImportRows(rowsToImport);
@@ -352,7 +351,7 @@ export default function ContactImportForm({ brandId }: { brandId: string }) {
         setStep("result");
       }
     },
-    [brandId, preview, overridingMappings, rawHeaders, rawRows]
+    [brandId, preview, overridingMappings]
   );
 
   const handleReset = () => {