Dev React Perf

React Performance Optimization

Avoid unnecessary re-renders

useMemo - Memoize expensive computations

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(items);
}, [items]);

useCallback - Memoize functions

const handleClick = useCallback(() => {
  onSubmit(formData);
}, [formData, onSubmit]);

React.memo - Memoize components

const UserCard = memo(({ user }: Props) => {
  return {user.name};
});

Lazy Loading

// Components
const HeavyComponent = lazy(() => import('./HeavyComponent'));

}>
  

// Routes (Next.js)
const DynamicComponent = dynamic(() => import('./Component'), {
  loading: () => ,
  ssr: false,
});

Virtualization

import { FixedSizeList } from 'react-window';

  {({ index, style }) => (
    {items[index].name}
  )}

Images (Next.js)

import Image from 'next/image';

Core Web Vitals

| Metric | Target | Optimization | |--------|--------|--------------| | LCP |

// GOOD: composition with variants

// BETTER: compound components

Loading...

### Compound Components

```tsx
// Compound component pattern
function Tabs({ children }: { children: React.ReactNode }) {
  const [active, setActive] = useState(0);
  return (
    
      {children}
    
  );
}

Tabs.List = function TabList({ children }) { /* ... */ };
Tabs.Tab = function Tab({ index, children }) { /* ... */ };
Tabs.Panel = function TabPanel({ index, children }) { /* ... */ };

// Usage

  
    Tab 1
    Tab 2
  
  Content 1
  Content 2

State Colocation (push state down)

// BAD: state in the parent (re-renders everything)
function Page() {
  const [search, setSearch] = useState('');
  return (
    
      
       {/* Unnecessary re-render! */}
             {/* Unnecessary re-render! */}
    
  );
}

// GOOD: state in the component that uses it
function Page() {
  return (
    
           {/* Internal state */}
           {/* Not affected */}
                  {/* Not affected */}
    
  );
}

Children as Props (avoid re-renders)

// GOOD: children do not re-render when the parent changes
function ScrollTracker({ children }: { children: React.ReactNode }) {
  const [scrollY, setScrollY] = useState(0);
  useEffect(() => {
    const handler = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []);

  return (
    
      
      {children} {/* Does NOT re-render when scrollY changes */}
    
  );
}

Render Props vs Hooks

// PREFER hooks over render props
// BAD: render prop (verbose, nested)
 (
  {width > 768 ? : }
)} />

// GOOD: custom hook (simple, composable)
function ResponsiveLayout() {
  const { width } = useWindowSize();
  return width > 768 ? : ;
}

Tools

# Analyze the bundle
npm run build -- --analyze

# Lighthouse
npx lighthouse https://example.com

# React DevTools Profiler
# Why did you render? (debug re-renders)
npm install @welldone-software/why-did-you-render

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: christopherlouet
• Source: christopherlouet/claude-base
• License: MIT
• Homepage: https://christopherlouet.github.io/claude-base/

Install and usage instructions live in the source repository linked above.