Agent skill

react-performance

Master React performance optimization with memoization, code splitting, profiling, and Web Vitals monitoring

View SKILL.md on GitHub Repository
Stars 1
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/pluginagentmarketplace/custom-plugin-react/tree/main/skills/react-performance

SKILL.md

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

jsx
// 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.id;
  }
);

useMemo

jsx
function ProductList({ products, searchTerm }) {
  // Only re-filter when dependencies change
  const filteredProducts = useMemo(() => {
    console.log('Filtering...');
    return products.filter(p =>
      p.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [products, searchTerm]);

  return <div>{filteredProducts.map(renderProduct)}</div>;
}

useCallback

jsx
function Parent() {
  const [count, setCount] = useState(0);

  // Stable function reference
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <MemoizedChild onClick={handleClick} />;
}

const MemoizedChild = React.memo(({ onClick }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>Click</button>;
});

Code Splitting

Route-Based Splitting

jsx
import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

Component-Based Splitting

jsx
function ProductPage() {
  const [showReviews, setShowReviews] = useState(false);

  const Reviews = lazy(() => import('./Reviews'));

  return (
    <div>
      <ProductInfo />
      <button onClick={() => setShowReviews(true)}>
        Show Reviews
      </button>
      {showReviews && (
        <Suspense fallback={<Spinner />}>
          <Reviews />
        </Suspense>
      )}
    </div>
  );
}

List Virtualization

React Window

jsx
import { FixedSizeList } from 'react-window';

function VirtualList({ items }) {
  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {({ index, style }) => (
        <div style={style}>
          {items[index].name}
        </div>
      )}
    </FixedSizeList>
  );
}

Image Optimization

Lazy Loading

jsx
function LazyImage({ src, alt }) {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isInView, setIsInView] = useState(false);
  const imgRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsInView(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );

    if (imgRef.current) observer.observe(imgRef.current);

    return () => observer.disconnect();
  }, []);

  return (
    <div ref={imgRef}>
      {isInView && (
        <img
          src={src}
          alt={alt}
          onLoad={() => setIsLoaded(true)}
          style={{ opacity: isLoaded ? 1 : 0 }}
        />
      )}
    </div>
  );
}

Bundle Optimization

Tree Shaking

jsx
// Good: Named imports
import { Button, Input } from 'components';

// Bad: Import everything
import * as Components from 'components';

Dynamic Imports

jsx
async function exportData() {
  const XLSX = await import('xlsx');
  // Use XLSX only when needed
}

Bundle Analysis

bash
# Create React App
npm install --save-dev source-map-explorer
npm run build
npx source-map-explorer 'build/static/js/*.js'

# Vite
npm install --save-dev rollup-plugin-visualizer

Common Mistakes

jsx
// ❌ Overusing useMemo
const greeting = useMemo(() => `Hello ${name}`, [name]);

// ✅ Just compute
const greeting = `Hello ${name}`;

// ❌ Inline objects in deps
useEffect(() => {
  fetchData(filters);
}, [filters]); // New object every render!

// ✅ Memoize object
const filters = useMemo(() => ({ category, sort }), [category, sort]);

// ❌ Creating functions in render
{items.map(item => <Item onClick={() => handle(item.id)} />)}

// ✅ Use useCallback
const handle = useCallback((id) => {...}, []);
{items.map(item => <Item onClick={handle} id={item.id} />)}

Web Vitals

Measuring Performance

jsx
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

function sendToAnalytics(metric) {
  console.log(metric);
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getFCP(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);

Best Practices

  1. Profile before optimizing
  2. Use React.memo for expensive components
  3. Memoize only when beneficial
  4. Split code at route boundaries
  5. Virtualize long lists
  6. Lazy load images
  7. Monitor bundle size

When to Optimize

DO Optimize

  • Frequent renders
  • Large lists (>100 items)
  • Expensive calculations
  • Heavy component trees

DON'T Optimize

  • Simple components
  • Rare renders
  • Cheap calculations
  • Small lists (<50 items)

Practice Exercises

  1. Profile app with React DevTools
  2. Optimize large product list
  3. Implement code splitting
  4. Build virtualized table
  5. Optimize image gallery
  6. Reduce bundle size
  7. Measure Web Vitals

Resources

Difficulty: Advanced Estimated Time: 2-3 weeks Prerequisites: React Hooks, Component Architecture

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

pluginagentmarketplace/custom-plugin-react

redux-state-management

Master Redux Toolkit for production state management including slices, async thunks, RTK Query, and error handling

1 0
Explore
pluginagentmarketplace/custom-plugin-react

next-js-framework

Build production-grade React apps with Next.js 14 App Router, Server Components, and Edge Runtime

1 0
Explore
pluginagentmarketplace/custom-plugin-react

react-router

Master React Router v6 for production routing with error boundaries, lazy loading, and navigation guards

1 0
Explore
pluginagentmarketplace/custom-plugin-react

react-hooks-patterns

Master React Hooks including useState, useEffect, useContext, useReducer, and custom hooks with production-grade patterns

1 0
Explore
pluginagentmarketplace/custom-plugin-react

component-library

Build production-grade, accessible, and tested component libraries with Storybook, Chromatic, and design tokens

1 0
Explore
pluginagentmarketplace/custom-plugin-react

react-testing-library

Write production-grade React tests with Testing Library, MSW, and comprehensive coverage patterns

1 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results