Real World Example

Typical fixes applied to a real slow e-commerce page, in the order a team would do them.

// 1. split heavy pages out of the main bundle
const ProductReviews = lazy(() => import('./ProductReviews'));

// 2. stop the gallery re-rendering when the quantity changes
const ImageGallery = memo(ImageGallery_);

// 3. keep the search input fast with a deferred value
const deferred = useDeferredValue(query);

// 4. render only visible reviews
const reviewList = <FixedSizeList itemCount={reviews.length} itemSize={120} height={600}>{ReviewRow}</FixedSizeList>;

// 5. lazy-load images below the fold
const image = <img src={p.image} loading="lazy" width={300} height={300} alt={p.name} />;