Email Validation Performance Testing: Real-Time vs Batch API Benchmarks 2025

// Real-time email validation with performance optimization
import { useState, useCallback } from 'react';
import { debounce } from 'lodash';

const EmailValidationComponent = () => {
  const [validationResult, setValidationResult] = useState(null);
  const [isValidating, setIsValidating] = useState(false);

  // Debounce validation to reduce API calls during typing
  const debouncedValidation = useCallback(
    debounce(async (email) => {
      if (!email || !email.includes('@')) return;

      setIsValidating(true);
      const startTime = performance.now();

      try {
        const response = await fetch('https://api.email-check.app/v1/validate', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer YOUR_API_KEY',
            'X-Request-ID': generateRequestId() // For debugging
          },
          body: JSON.stringify({
            email,
            timeout: 5000, // 5 second timeout
            include_details: true
          })
        });

        const data = await response.json();
        const responseTime = performance.now() - startTime;

        setValidationResult({
          ...data,
          responseTime: Math.round(responseTime),
          performanceTier: responseTime < 50 ? 'excellent' : responseTime < 100 ? 'good' : 'acceptable'
        });
      } catch (error) {
        console.error('Validation failed:', error);
        // Implement retry logic or fallback validation
      } finally {
        setIsValidating(false);
      }
    }, 300), // 300ms debounce
    []
  );

  const handleEmailChange = (e) => {
    const email = e.target.value;
    debouncedValidation(email);
  };

  return (
    <div className="email-validation-container">
      <input
        type="email"
        onChange={handleEmailChange}
        placeholder="Enter email address"
        className={isValidating ? 'validating' : ''}
      />
      {isValidating && <div className="spinner">Validating...</div>}
      {validationResult && (
        <div className={`validation-status ${validationResult.is_valid ? 'valid' : 'invalid'}`}>
          <span className="status-indicator">
            {validationResult.is_valid ? '✓' : '✗'}
          </span>
          <span className="status-text">
            {validationResult.is_valid ? 'Valid email' : 'Invalid email'}
          </span>
          <span className="response-time">
            Response: {validationResult.responseTime}ms ({validationResult.performanceTier})
          </span>
        </div>
      )}
    </div>
  );
};

function generateRequestId() {
  return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
}