react-performance-optimization

React Performance Optimization

Overview

This skill provides a systematic approach to identifying and resolving performance issues in React applications. It covers profiling tools, bundle optimization, rendering optimization, asset loading, and Core Web Vitals improvement.

Core Principle: Measure first, optimize second. Never apply performance optimizations speculatively. Every optimization adds complexity; only add complexity when measurements show a real problem.

When to Use

Use this skill when:

• Application feels slow or janky
• Bundle size is too large (over 200KB gzipped for initial load)
• Core Web Vitals scores are below thresholds
• Components re-render too frequently
• Page load time exceeds 3 seconds
• Lighthouse Performance score is below 80

Trigger phrases:

• "Optimize performance"
• "Reduce bundle size"
• "Fix slow rendering"
• "Improve web vitals"
• "Profile this component"
• "Code split this route"
• "Why is this component slow"

Profiling Tools

React DevTools Profiler

The primary tool for identifying unnecessary re-renders and slow components.

How to profile:

1. Open React DevTools > Profiler tab
2. Click "Record"
3. Interact with the application (the specific flow that feels slow)
4. Click "Stop"
5. Analyze the flamegraph

What to look for:

• Components that render when they should not (gray = did not render, colored = rendered)
• Components with high "self time" (the component's own rendering cost, excluding children)
• Cascading re-renders (a parent change causing deep tree re-renders)

Ranked chart view: Shows components sorted by render time. Focus on the top entries.

React Profiler Component (Programmatic)

import { Profiler, type ProfilerOnRenderCallback } from "react";

const onRender: ProfilerOnRenderCallback = (id, phase, actualDuration) => {
  if (actualDuration > 16) {
    // Longer than one frame at 60fps
    console.warn(`Slow render: ${id} (${phase}) took ${actualDuration.toFixed(2)}ms`);
  }
};

function App() {
  return (
    <Profiler id="App" onRender={onRender}>
      <MainContent />
    </Profiler>
  );
}