Refactor: Optimize validation in moderation

src/components/moderation/ItemReviewCard.tsx

@@ -7,7 +7,7 @@ import { useIsMobile } from '@/hooks/use-mobile';
 import { PhotoSubmissionDisplay } from './PhotoSubmissionDisplay';
 import { SubmissionChangesDisplay } from './SubmissionChangesDisplay';
 import { ValidationSummary } from './ValidationSummary';
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import { ValidationResult } from '@/lib/entityValidationSchemas';
 
 interface ItemReviewCardProps {
@@ -21,6 +21,10 @@ export function ItemReviewCard({ item, onEdit, onStatusChange, submissionId }: I
   const isMobile = useIsMobile();
   const [validationResult, setValidationResult] = useState<ValidationResult | null>(null);
   
+  const handleValidationChange = useCallback((result: ValidationResult) => {
+    setValidationResult(result);
+  }, []);
+  
   const getItemIcon = () => {
     switch (item.item_type) {
       case 'park': return <MapPin className="w-4 h-4" />;
@@ -117,7 +121,7 @@ export function ItemReviewCard({ item, onEdit, onStatusChange, submissionId }: I
               item_data: item.item_data,
               id: item.id,
             }}
-            onValidationChange={setValidationResult}
+            onValidationChange={handleValidationChange}
             compact={false}
           />
         </div>

src/components/moderation/QueueItem.tsx

@@ -1,4 +1,4 @@
-import { memo, useState } from 'react';
+import { memo, useState, useCallback } from 'react';
 import { CheckCircle, XCircle, Eye, Calendar, MessageSquare, FileText, Image, ListTree, RefreshCw, AlertCircle, Lock, Trash2, AlertTriangle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -99,6 +99,10 @@ export const QueueItem = memo(({
 }: QueueItemProps) => {
   const [validationResult, setValidationResult] = useState<ValidationResult | null>(null);
   
+  const handleValidationChange = useCallback((result: ValidationResult) => {
+    setValidationResult(result);
+  }, []);
+  
   return (
     <Card 
       key={item.id} 
@@ -166,7 +170,7 @@ export const QueueItem = memo(({
                   id: item.id,
                 }}
                 compact={true}
-                onValidationChange={setValidationResult}
+                onValidationChange={handleValidationChange}
               />
             )}
           </div>

src/components/moderation/ValidationSummary.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { AlertCircle, CheckCircle, Info, AlertTriangle } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
@@ -20,22 +20,21 @@ export function ValidationSummary({ item, onValidationChange, compact = false }:
   const [isLoading, setIsLoading] = useState(true);
   const [isExpanded, setIsExpanded] = useState(false);
 
+  // Create stable reference for item_data to prevent unnecessary re-validations
+  const itemDataString = useMemo(
+    () => JSON.stringify(item.item_data),
+    [item.item_data]
+  );
+
   useEffect(() => {
     async function validate() {
       setIsLoading(true);
       try {
-        console.log('Validating submission:', {
-          type: item.item_type,
-          data: item.item_data,
-          id: item.id
-        });
-        
         const result = await validateEntityData(
           item.item_type as any,
           { ...item.item_data, id: item.id }
         );
         
-        console.log('Validation result:', result);
         setValidationResult(result);
         onValidationChange?.(result);
       } catch (error) {
@@ -53,7 +52,7 @@ export function ValidationSummary({ item, onValidationChange, compact = false }:
     }
 
     validate();
-  }, [item.item_type, item.item_data, item.id, onValidationChange]);
+  }, [item.item_type, itemDataString, item.id]);
 
   // Auto-expand when there are blocking errors or warnings
   useEffect(() => {