# Dev React Perf

> React/Next.js performance optimization. Trigger when the user wants to optimize rendering, reduce re-renders, or improve Core Web Vitals.

- **Type:** Skill
- **Install:** `agentstack add skill-christopherlouet-claude-base-dev-react-perf`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [christopherlouet](https://agentstack.voostack.com/s/christopherlouet)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [christopherlouet](https://github.com/christopherlouet)
- **Source:** https://github.com/christopherlouet/claude-base/tree/main/.claude/skills/dev-react-perf
- **Website:** https://christopherlouet.github.io/claude-base/

## Install

```sh
agentstack add skill-christopherlouet-claude-base-dev-react-perf
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# React Performance Optimization

## Avoid unnecessary re-renders

### useMemo - Memoize expensive computations

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

### useCallback - Memoize functions

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

### React.memo - Memoize components

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

## Lazy Loading

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

}>
  

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

## Virtualization

```tsx
import { FixedSizeList } from 'react-window';

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

```

## Images (Next.js)

```tsx
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)

```tsx
// 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)

```tsx
// 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

```tsx
// 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

```bash
# 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](https://github.com/christopherlouet)
- **Source:** [christopherlouet/claude-base](https://github.com/christopherlouet/claude-base)
- **License:** MIT
- **Homepage:** https://christopherlouet.github.io/claude-base/

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-christopherlouet-claude-base-dev-react-perf
- Seller: https://agentstack.voostack.com/s/christopherlouet
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.