react-performance

name	react-performance
description	Master React performance optimization with memoization, code splitting, profiling, and Web Vitals monitoring
sasmp_version	2.0.0
bonded_agent	06-performance-optimization
bond_type	PRIMARY_BOND
input_validation	{"required_packages":[{"react":">=18.0.0"},{"web-vitals":">=3.0.0"}]}
output_format	{"code_examples":"jsx","metrics_target":{"lcp":"<2.5s","fid":"<100ms","cls":"<0.1"}}
error_handling	{"patterns":["graceful_degradation","lazy_fallback","error_boundary"]}
observability	{"logging":"web_vitals","metrics":["lcp","fid","cls","ttfb","inp"]}

React Performance Optimization Skill

Overview

Master React performance optimization techniques including memoization, code splitting, lazy loading, and profiling tools.

Learning Objectives

• Identify performance bottlenecks
• Use React DevTools Profiler
• Implement memoization strategies
• Apply code splitting techniques
• Optimize bundle size

React DevTools Profiler

Profiling Steps

1. Open React DevTools
2. Go to Profiler tab
3. Click record button
4. Interact with app
5. Stop recording
6. Analyze flame graph

Reading Results

• Render duration: Time spent rendering
• Commits: Number of renders
• Flame graph: Visual render tree
• Ranked chart: Components by render time

Memoization

React.memo

// Prevent re-render if props unchanged
const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
  return <div>{data.value}</div>;
});

// Custom comparison
const Component = React.memo(
  ({ user }) => <div>{user.name}</div>,
  (prevProps, nextProps) => {
    return prevProps.user.id === nextProps.user.;
  }
);