A page must show a table with 50,000 rows and stay smooth while scrolling and filtering. How would you build it?

What the interviewer wants to hear

• Virtualise rows so only visible rows are in the DOM
• Paginate or stream data from the server where possible
• Do heavy filtering and sorting off the main thread or on the server
• Memoise rows and keep props stable
• Use transitions or deferred values to keep input responsive
• Handle accessibility and variable row heights

Model answer

Rendering 50,000 DOM rows will be slow, so the core idea is virtualisation: only render the rows visible in the viewport plus a small buffer, using a library like TanStack Virtual, and position them inside a tall scroll container. I would ask if the user really needs all rows on the client; often server-side pagination, filtering and sorting is better. If the data must be local, I move filtering and sorting to a Web Worker or use efficient indexes, so the main thread stays free. Rows are memoised with stable keys and callbacks. The filter input updates immediately while the list update uses useDeferredValue or startTransition. I also handle variable row heights by measuring, keep keyboard navigation and ARIA row counts correct, and profile with DevTools to confirm frames stay under 16ms.

More hard Frontend Developer questions

• How would you design and build a shared component library (design system) used by several product teams?
• What are the main security risks for a frontend application and how do you protect against them?
• Your company wants to split a large frontend into micro-frontends. What are the trade-offs and how would you approach it?
• What are React Server Components, and how do they change the way you build a React app?
• How would you design a web app that keeps working offline, for example for field workers with poor connectivity?
• You join a team with a large JavaScript React codebase. How would you migrate it to TypeScript without stopping feature work?
• How would you build the frontend for a real-time feature like a shared task board where many users edit at the same time?
• Users report that your single-page app becomes slow and crashes after being open for a few hours. How do you investigate and fix it?
• How do you know your frontend is healthy in production? Describe the monitoring you would set up.