A Practical React Performance Model
Performance is not simply 'fewer renders'. A render may be cheap, while a single expensive calculation, layout operation, network waterfall, or large JavaScript bundle may dominate user experience.
Measure at the right level: initial load, interaction latency, rendering cost, network timing, memory growth, and browser main-thread work.
The first optimization is often architectural: avoid fetching data that is not needed, avoid rendering thousands of off-screen rows, split large routes, and keep state ownership narrow.
Performance Investigation
Key Takeaways
- Optimize measured bottlenecks.
- Performance includes network, JavaScript, rendering, and browser work.
- Architecture often beats micro-optimizations.