React & Frontend
10 React Performance Tricks That Actually Made My Apps Faster
By Riazul Islam•
Summary: No fluff, no theory. Just practical tips I've used in production apps to cut load times by 60% and make users actually enjoy using the app.
## Why Your React App Feels Sluggish
I've been there. You build something beautiful, it works great in development, and then you deploy it. Suddenly, everything feels... slow. Users complain. Bounce rates go up. Here's what I learned fixing these problems.
### 1. Stop Re-rendering Everything
The biggest performance killer in React? Unnecessary re-renders. Use `React.memo` for components that receive the same props frequently.
```jsx
const ExpensiveList = React.memo(({ items }) => {
return items.map(item => <ListItem key={item.id} {...item} />);
});
```
### 2. Lazy Load Your Routes
Why load 50 pages worth of JavaScript when the user only sees one? Code splitting with `React.lazy` reduced our initial bundle by 45%.
### 3. Use `useMemo` and `useCallback` Wisely
Don't wrap everything in `useMemo`. Only use it for genuinely expensive calculations or when passing callbacks to memoized children.
### 4. Virtualize Long Lists
Rendering 10,000 items? Don't. Use `react-window` or `react-virtuoso` to only render what's visible on screen. This single change made one of my dashboards go from 3 seconds to 200ms load time.
### 5. Optimize Images
- Use WebP format (30% smaller than JPEG)
- Implement lazy loading with Intersection Observer
- Serve responsive sizes with `srcSet`
### 6. Debounce Search Inputs
Every keystroke firing an API call? That's killing your server and your UX. Debounce it.
### 7. Prefetch Data on Hover
When a user hovers over a link, start fetching the data. By the time they click, it's already loaded. React Query makes this trivially easy.
### 8. Use the Production Build
Sounds obvious, but I've seen teams deploy development builds. The difference is massive - production builds are 2-3x smaller and significantly faster.
### 9. Audit Your Dependencies
Run `npx bundlephobia` on your packages. You'd be surprised how many libraries are bloated. I replaced `moment.js` (70KB) with `date-fns` (tree-shakeable, ~5KB for what I needed).
### 10. Monitor with Web Vitals
You can't improve what you don't measure. Track Core Web Vitals - LCP, FID, CLS - and set budgets for each.
### Results I've Seen
After applying these techniques to a client's e-commerce site:
- **LCP dropped from 4.2s to 1.8s**
- **Bundle size reduced by 60%**
- **Bounce rate decreased by 35%**
Performance isn't a feature. It's a requirement.