React & IndexedDB: Validating 10k CSV Rows in 20ms

Observing a user import a 10,000-row billing CSV over spotty Wi-Fi on a standard web application typically reveals a frustrating experience. They select the file, wait ten seconds for the progress bar to crawl to 100%, and get bounced back by a red toast message showing a 400 Bad Request due to an invalid amount on row 7,500. This forces them to fix row 7,500, re-upload the entire file, and discover yet another typo on row 8,102.

Furthermore, if their connection drops while editing rows in the UI and they refresh the page, the situation usually deteriorates. Many applications attempt to stash draft uploads in localStorage, forgetting that browsers cap localStorage around 5 MB and block the main thread synchronously on writes, which ultimately throws a QuotaExceededError precisely when the user needs a backup most.

These challenges can be resolved entirely on the frontend without importing a bulky 200 KB validation library. In the companion repository (github.com/endlessfountain/react-offline-sheet-guard), a lightweight TypeScript preflight check validates 10,000 CSV rows spanning 40,000 cells in 20.11 ms before a single byte hits the network, paired with a 45-line IndexedDB helper to ensure multi-megabyte drafts survive offline refreshes.

While checking whether an email looks valid or verifying if a seatCount is an integer is relatively cheap, the operation that quietly destroys browser performance on 10,000-row sheets is duplicate ID detection.

Stock photo for illustration only, not from the actual event

When developers write quick client-side validators, they often reach for Array.prototype.some() inside a row loop, which results in around 50 million string comparisons and locks the tab for nearly a second on mid-range laptops. Swapping that array scan for a Set keeps duplicate detection running at O(1) per row, as implemented in src/engine/sheetValidator.ts.