Mastering React Performance: A Practical Guide

Performance Is a Feature

A slow app loses users. According to Google, a 100ms delay in load time can reduce conversion by 7%. In React, most performance problems fall into one of three categories: unnecessary re-renders, expensive calculations on every render, and loading too much JavaScript upfront.

Unnecessary Re-renders

The most common React performance issue. Use the React DevTools Profiler to identify which components are re-rendering and why. The fix is usually one of:

• React.memo() — memoize a component to skip re-renders when props haven't changed
• useCallback() — stabilize function references passed as props
• Moving state down — don't put state higher in the tree than necessary

Expensive Calculations

useMemo() caches the result of an expensive calculation. Use it only when the calculation is genuinely expensive — filtering/sorting a list of 100 items is NOT expensive enough to warrant useMemo. Measure before optimizing.

Code Splitting

Load less JavaScript upfront with React.lazy() and Suspense. Split at the route level first — that's where you get the most wins with the least complexity.