Frontend · JavaScript · Interview

A Frontend Interviewer Offered Me the Team Lead Role After Watching Me Optimize a 100k-Row Table with Claude in 5 Seconds

By kyriewen · Jul 15, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

The interview didn't test React knowledge — it tested whether the candidate could use AI as a force multiplier while still applying the engineering judgment to verify, critique, and adapt its output. For hiring managers, this is the new signal: not "can you code," but "can you direct an AI to produce production-grade work and catch where it's wrong."

Summary

The interview problem was a classic React performance trap: a table component mounting 100,000 rows with heavy Select and DatePicker widgets, causing a 6.8-second white screen and 8 FPS scrolling. Instead of whiteboarding solutions from memory, the candidate opened Claude Code, fed it the full component, data types, and business constraints, and asked for three distinct optimization paths with trade-off analysis. Claude returned virtual scrolling, time-sliced progressive rendering, and a Canvas-based library approach within seconds. The candidate then ran each solution through Chrome DevTools in the company's own test environment, showing a 21x improvement in first paint — from 6.8 seconds down to 320 milliseconds — and explained why virtual scrolling was the right call given the future requirement for inline editing. The interviewer, a frontend lead in his forties, put down his coffee and asked whether the candidate wanted the team lead position that was opening up next month.

Takeaways

— Rendering 100,000 rows with embedded Select and DatePicker components caused a 6.8-second first paint and 8 FPS scrolling in production.

— Claude generated three optimization strategies — virtual scrolling, time-sliced rendering, and Canvas-based rendering — in about 4 seconds from a single detailed prompt.

— Virtual scrolling with @tanstack/react-virtual brought first paint to 320ms and maintained 60 FPS scrolling, a 21x improvement.

— Time-sliced rendering achieved the fastest first paint at 90ms but required 12 seconds to reach the bottom of the table, creating visible gaps during scroll.

— The AG Grid Canvas approach delivered 60 FPS at 480ms first paint but added 480KB to the bundle.

— Hoisting overlay state (like an open Select) to a parent component and rendering via Portal prevented the overlay from disappearing when a row scrolled out of the viewport.

— The candidate's prompt contained five specific constraints: tech stack, data scale, complex components, interaction requirements, and evaluation criteria — not a generic optimization request.

— The interviewer's decision hinged on three observed skills: information bandwidth in prompt design, verification of AI output with real benchmarks, and knowing when AI's suggestions would break under edge cases.

Conclusions

The interview effectively tested prompt engineering as a proxy for experience: the specificity of the prompt — React 18, 100k rows, Select/DatePicker, future inline editing — encoded five years of frontend judgment that a junior developer would not think to include.

Verification, not generation, is becoming the scarce skill. The candidate's instinct to run Performance benchmarks and follow up with a 'what if the overlay detaches' question demonstrated the exact skepticism that separates AI-augmented seniors from copy-paste juniors.

The team lead offer was not about technical wizardry; it was about throughput. The interviewer calculated that someone who can direct AI to produce, validate, and defend architectural decisions in minutes can compress a quarter's roadmap.

Traditional interview staples like hand-writing Promise or deep clone are losing signal value when AI solves them instantly. The higher-value skill is composing multi-constraint prompts and interrogating the output for failure modes.

Concepts & terms

Virtual Scrolling

A technique that renders only the rows currently visible in the viewport plus a small overscan buffer, replacing off-screen rows with empty spacer elements to maintain scrollbar height. Libraries like @tanstack/react-virtual calculate which rows to render based on scroll position.

Time-Sliced Progressive Rendering

A strategy that renders a small initial batch of rows (e.g., 50) and uses requestIdleCallback to incrementally add more rows during browser idle periods. It prioritizes a fast first paint but leaves the full dataset incomplete until all slices finish.

Canvas / Semi-Canvas Rendering

Instead of using DOM elements for each cell, the table is drawn onto a <canvas> element, giving the renderer full control over painting and layout. Libraries like AG Grid use this to handle massive datasets with smooth scrolling, at the cost of larger bundle size and harder customization.

Portal Rendering

A React pattern that renders a component's DOM node outside its parent hierarchy — typically into a dedicated container at the document root. Used here to keep a Select dropdown alive even when its parent row is unmounted by virtual scrolling.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗