React Performance Checklist (2025)

Building fast React applications requires a systematic approach. Here's my checklist for optimizing React apps in 2025, based on real-world experience improving LCP by 38% and cutting bundle sizes by 45%.

Core Metrics to Track

Focus on these Web Vitals:

• LCP (Largest Contentful Paint) - Target: < 2.5s
• FID/INP (First Input Delay/Interaction to Next Paint) - Target: < 200ms
• CLS (Cumulative Layout Shift) - Target: < 0.1

Bundle Optimization

1. Code Splitting

// Route-based splitting
const LazyComponent = lazy(() => import("./LazyComponent"));

// Feature-based splitting
const ExpensiveFeature = lazy(() =>
  import("./ExpensiveFeature").then((module) => ({
    default: module.ExpensiveFeature,
  }))
);

2. Tree Shaking

// Good: Import only what you need
import { debounce } from "lodash-es";

// Bad: Imports entire library
import _ from "lodash";

Image Optimization

Use Next.js Image component with proper sizing:

import Image from "next/image";

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={800}
  height={400}
  priority
  sizes="(max-width: 768px) 100vw, 800px"
/>;

React Patterns

Memoization

// Expensive calculations
const expensiveValue = useMemo(() => {
  return heavyCalculation(data);
}, [data]);

// Component memoization
const ExpensiveComponent = memo(({ data }) => {
  return (
    <div>
      {data.map((item) => (
        <Item key={item.id} {...item} />
      ))}
    </div>
  );
});

Virtualization

For large lists, use react-window or @tanstack/react-virtual:

import { FixedSizeList as List } from "react-window";

const VirtualizedList = ({ items }) => (
  <List height={600} itemCount={items.length} itemSize={50}>
    {({ index, style }) => <div style={style}>{items[index].name}</div>}
  </List>
);

Build Tools

Webpack → Vite Migration Benefits

• 30-50% faster builds
• Instant HMR
• Better tree shaking

SWC over Babel

// next.config.js
module.exports = {
  swcMinify: true,
  experimental: {
    swcTraceProfiling: true,
  },
};

Monitoring

Set up performance monitoring:

• Lighthouse CI in your pipeline
• Web Vitals tracking in production
• Bundle analyzer to catch regressions

Takeaways

1. Measure first - Use Lighthouse and Web Vitals
2. Optimize images - Often the biggest wins
3. Split your code - Route and feature-based
4. Memoize wisely - Don't over-optimize
5. Monitor continuously - Catch regressions early

Performance is a feature, not an afterthought. By following this checklist, you can deliver consistently fast React applications that users love.