Skip to main content

Exercise: Performance Optimization Challenge

Objective​

Optimize a slow React application for better performance.

Scenario​

You're given a product list with 10,000 items that's very slow. Optimize it.

Tasks​

1. Identify Bottlenecks​

  • Use React DevTools Profiler
  • Measure render times
  • Identify unnecessary re-renders

2. Optimization Techniques​

  • Implement virtualization (react-window)
  • Add React.memo to components
  • Use useMemo for filtered lists
  • Use useCallback for handlers
  • Code split heavy components

3. Measure Improvements​

  • Before/after metrics
  • Lighthouse scores
  • Time to interactive
  • First contentful paint

4. Advanced Optimizations​

  • Debounce search
  • Lazy load images
  • Prefetch on hover
  • Web workers for heavy calculations

Success Criteria​

  • Reduce initial render time by 80%
  • Achieve 60 FPS scrolling
  • Lighthouse score > 90
  • Time to Interactive < 2s

Time Estimate​

3-4 hours