Optimize React
Reduce shipped code and costly rendering while keeping routing, accessibility and user-specific data correct.
Measure before changing settings
Back up the site, choose a repeatable page or API request, and record load time, server response time, errors, memory and CPU use. Test while signed out and signed in. Change one thing at a time on staging before applying it to production.
Steps
- Publish a production build and measure network transfer, first content and user interaction on representative pages.
- Split code by route or optional feature, and keep loading boundaries useful. Avoid shipping large unused dependencies.
- Use the profiler to find expensive renders before adding memoization. Keep state close to where it is used and virtualize very long lists.
- Optimize images and fonts, prevent layout shifts and cache versioned assets. Do not cache private API responses as public.
- Choose client rendering, static generation or a server-rendered framework based on the page’s needs. Server-only APIs and secrets need a real server runtime.
- Test navigation, refresh, forms, hydration if used, and authentication after each change. Retain a working previous release for rollback.
Check the result
Repeat the same measurements and confirm login, forms, uploads and checkout still work. Keep the change only if it improves the measured problem without causing errors. Clear only the relevant cache and keep a rollback copy.
Related articles
Last reviewed
2026-10-28