Frontend: Performance Optimization

Interviewer

Our React app has a page with a large data table that renders 1000+ rows. Interactions are janky and initial load is slow. How would you fix this?

Candidate

I'd approach this in layers: First, virtualize the table. Only render rows currently visible in the viewport using a library like react-virtualized or react-window. This alone often solves jank for large lists. Second, memoize expensive computations. Use useMemo for derived data and React.memo for row components. Make sure callbacks don't change every render (useCallback). Third, lazy load the data itself. If the table has 1000 rows, maybe the user only needs the first 50 immediately. Use pagination or infinite scroll with a loading skeleton. For initial load time, code-split the table component so it's loaded only when the user navigates to that page. Also consider server-side pagination: the API only returns the current page instead of all 1000 rows.

Interviewer

The product team insists on showing all rows in a single scrollable view. How do you respond?

Candidate

I'd use virtualization. With react-window, we render maybe 20 DOM nodes regardless of total data size. Each row is measured, and scrolling adjusts which rows are mounted. This keeps the DOM small and interactions fast. I'd also ensure row heights are fixed (or use dynamic measurement with a CellMeasurer). And batch any state updates - if the user sorts or filters, debounce the render.