React Performance Optimization: 10 Fixes That Actually Matter

Most slow React apps are slow for a few repeatable reasons. Fix those before reaching for exotic tricks.

1. Measure first

Open the React DevTools Profiler and record the interaction that feels slow. It shows which components rendered and why. Optimizing without data wastes time.

2. Put state where it is used

State that lives too high re-renders everything below it. Move it down to the smallest component that needs it, or split one big component in two.

3. Memoize with intent

React.memo, useMemo and useCallback help when a child is expensive and its props are stable. Wrapping everything adds overhead and noise. Use them where the profiler shows a real cost.

4. Use stable keys in lists

Use a real id as the key, never the array index when items can be reordered or removed.

5. Virtualize long lists

Rendering thousands of rows is slow no matter what. Libraries like @tanstack/react-virtual render only the visible ones.

6. Split your code

Load heavy components such as editors and charts only when needed.

const Editor = lazy(() => import('./Editor'));

7. Debounce expensive input work

Searching on every keystroke hammers your API and your renderer. Debounce by 250 to 400 ms.

8. Cache server data

Libraries like TanStack Query cache, dedupe and refetch intelligently, so components stop re-fetching the same data.

9. Optimize images

Serve modern formats, correct sizes and lazy loading. Images are often the biggest part of a page.

10. Watch your bundle

Run a bundle analyzer and look for duplicate or oversized dependencies. Replacing one heavy library can beat a day of micro-optimizing.

Takeaway

Profile, move state down, memoize selectively, split code and ship less. Performance is mostly about doing less work.