Careeroza

Performance Scenarios

A page with a list of 10,000 items is lagging. What steps do you take?

  1. Measure with the React Profiler to confirm the list is the problem.
  2. Virtualize the list (react-window): only the ~20 visible rows exist in the DOM.
  3. Or use pagination / infinite scroll to fetch and render less data.
  4. Give rows a stable key and wrap the row component in React.memo.
  5. Debounce filter inputs and memoize filtering/sorting with useMemo.
  6. Use useTransition so typing stays responsive while the list updates.

See Medium → Virtualization for a live example.

A search box calls the API on every keystroke. How do you fix it?

Debounce the input (300–500 ms) so the API is called only after the user stops typing, cancel outdated requests with AbortController (or ignore stale responses), and cache results (React Query). See Medium → Debouncing and Throttling.

The app becomes slower the longer it stays open. What could be wrong?

Probably a memory leak: intervals, listeners, sockets or subscriptions started in effects without cleanup, or a global array that keeps growing. Compare heap snapshots in Chrome DevTools, then add cleanup functions to the effects. See Medium → Memory Leaks.