How to efficiently validate and sanitize large CSV datasets without blocking UI? [closed]

I'm building a data quality tool in React/TypeScript that allows users to upload CSV files (10,000+ rows) and validate/clean the data before processing. I need to handle client-side validation without freezing the UI.

Current Implementation

typescript

interface DataRow {
  name: string;
  email: string;
  phone: string;
  date: string;
}

const validateData = (rows: DataRow[]) => {
  const errors: Record<number, string[]> = {};
  
  rows.forEach((row, index) => {
    const rowErrors: string[] = [];
    
    // Email validation
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(row.email)) {
      rowErrors.push('Invalid email format');
    }
    
    // Phone validation
    if (!/^\+?[\d\s-()]+$/.test(row.phone)) {
      rowErrors.push('Invalid phone format');
    }
    
    // Date validation
    if (isNaN(Date.parse(row.date))) {
      rowErrors.push('Invalid date format');
    }
    
    if (rowErrors.length > 0) {
      errors[index] = rowErrors;
    }
  });
  
  return errors;
};

Problems

1. Performance Issue: When processing large files (50,000+ rows), the UI freezes for several seconds during validation

2. Memory Concerns: Loading and validating huge datasets causes browser memory warnings

3. User Experience: No progress indication during long validation operations

What I've Tried

• setTimeout batching - Helps slightly but still blocks on large batches

• Web Workers - Struggle with passing large data sets efficiently between threads

• Pagination - Users want to see all validation errors at once, not page by page

Questions

1. What's the best approach for validating large datasets in React without blocking the UI thread?

2. Should I use Web Workers with structured cloning, or is there a better pattern with async/await and requestIdleCallback?

3. How do production data quality tools handle client-side validation of massive datasets efficiently?

4. Are there TypeScript-friendly libraries specifically designed for large-scale data validation?

Requirements

• Must handle 10,000-100,000 rows efficiently

• Need real-time progress feedback during validation

• Should validate multiple data types (email, phone, dates, names, addresses)

• Must work entirely client-side (no server uploads for data privacy)

• TypeScript support preferred

Environment

• React 18.2

• TypeScript 5.0

• Vite 4.3

• Target: Modern browsers (Chrome, Firefox, Safari latest versions)

Any guidance on architecture patterns, libraries, or performance optimization strategies would be greatly appreciated!