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.