Why Your React App Is Slow (And How to Fix It)

Performance problems in React apps usually come from the same places. Here's how to diagnose and fix them.

The Usual Suspects

1. Unnecessary Re-renders

React re-renders when state changes. If your component tree is large, this adds up.

// Bad: Component re-renders on every parent state change
function Parent() {
  const [count, setCount] = useState(0);
  return <ExpensiveChild />;
}

// Good: Memoize stable children
function Parent() {
  const [count, setCount] = useState(0);
  return <Memo(ExpensiveChild) />;
}

2. Large Bundle Sizes

Importing entire libraries for one function:

// Bad: Imports everything
import _ from 'lodash';
const unique = _.uniq(arr);

// Good: Tree-shakeable named import
import uniq from 'lodash/uniq';

3. Not Using Production Build

Development builds are 3-5x slower. Always test performance with:

npm run build
npm run serve

The Performance Checklist

• [ ] React DevTools Profiler - find re-render hotspots
• [ ] Lighthouse audit - catch bundle/lcp issues
• [ ] Web Vitals monitoring - track real user performance

Quick Wins

1. Add loading="lazy" to images
2. Use useMemo for expensive calculations
3. Split routes with React.lazy
4. Debounce expensive event handlers
5. Virtualize long lists (react-window)

Performance is a feature. Treat it like one.