dev-react-perflisted
Install: claude install-skill christopherlouet/claude-base
# 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 <div>{user.name}</div>;
});
```
## Lazy Loading
```tsx
// Components
const HeavyComponent = lazy(() => import('./HeavyComponent'));
<Suspense fallback={<Loading />}>
<HeavyComponent />
</Suspense>
// Routes (Next.js)
const DynamicComponent = dynamic(() => import('./Component'), {
loading: () => <Skeleton />,
ssr: false,
});
```
## Virtualization
```tsx
import { FixedSizeList } from 'react-window';
<FixedSizeList
height={400}
itemCount={items.length}
itemSize={50}
>
{({ index, style }) => (
<div style={style}>{items[index].name}</div>
)}
</FixedSizeList>
```
## Images (Next.js)
```tsx
import Image from 'next/image';
<Image
src="/photo.jpg"
alt="Description"
width={800}
height={600}
priority={isAboveFold}
placeholder="blur"
/>
```
## Core Web Vitals
| Metric | Target | Optimization |
|--------|--------|--------------|
| LCP | < 2.5s | Preload hero image, SSR |
| FID | < 100ms | Code splitting, defer JS |
| CLS | < 0.1 | Explicit dimensions |
## Composition Patterns
### Avoid excessive boole