React performance starts with architecture
A practical checklist for making React interfaces faster without premature optimization.
The short answer
The best React performance work starts by measuring real bottlenecks, keeping state close to where it is used, and reducing unnecessary client-side JavaScript.
Detailed explanation
Begin with the user-visible delay: loading, interaction or rendering. Use the browser profiler and Core Web Vitals before changing code. Split pages by responsibility, prefer server-rendered output for static content, and make client components earn their bundle cost. Memoization is useful after measurement; it is not a substitute for a clear data flow.
Examples
Move a search query into the smallest interactive component, lazy-load a media-heavy gallery, and use stable list keys. Recheck the same user journey after each change.
Developer perspective
Fast interfaces usually come from fewer responsibilities per component and less work shipped to the browser. A profiler should settle optimization debates.
Sources
Frequently asked questions
Should every React component use memo?
No. Measure first and use memoization where repeated rendering is demonstrably expensive.
What should I optimize first?
Optimize the slowest user-visible journey identified by field data or a browser profile.