React Performance Optimisation Checklist
Slow applications kill businesses.
They cause high bounce rates and frustrate users. They also increase your infrastructure costs.
You do not need complex tricks to fix this. Most speed issues come from unnecessary work. Use this checklist to build faster React apps.
Stop Unnecessary Re-renders
React is fast, but rendering thousands of extra components is not.
- Keep components small and split large ones.
- Move state closer to where you use it.
- Use React.memo only for components that render often or do heavy work.
- Do not wrap every tiny component in React.memo. It costs more to compare props than to render.
Handle Heavy Logic
- Use useMemo for expensive tasks like sorting or filtering data.
- Use useCallback when passing functions to memoized children.
- Do not use useCallback for every single function.
Fix Your useEffect Usage
The best useEffect is no useEffect.
- Do not use useEffect to set state based on other state.
- Use useMemo for derived data instead.
- This leads to fewer renders and cleaner code.
Load Smarter
- Use React.lazy to split your code.
- Use Suspense to load heavy parts like charts or maps only when needed.
- This improves your initial load time.
Manage Large Data
- Do not render 20,000 items at once.
- Use libraries like react-window to virtualize lists.
- This ensures you only render what the user sees on screen.
Optimize Assets and State
- Use WebP or AVIF for images.
- Lazy load images that are not on the screen yet.
- Use useRef for values that do not need to trigger a UI update.
- Reducing state reduces renders.
Control Network Traffic
- Use debouncing for search bars to prevent constant API calls.
- Use caching libraries to reuse data and reduce server load.
The Golden Rule
Measure before you optimize.
- Use React DevTools Profiler.
- Use Lighthouse to find real bottlenecks.
- Do not optimize code that is already fast.
Optimization is about simplicity. Write predictable code first. Measure second. Optimize last.