performance-optimization

Performance Optimization Patterns

React Performance Rules

1. Memoization

Use React.memo() for expensive pure components:

export const ExpensiveComponent = memo<Props>(({ data }) => {
  return <div>{/* expensive rendering */}</div>;
});

Use useMemo() for expensive calculations:

const sortedData = useMemo(() => {
  return data.sort((a, b) => a.value - b.value);
}, [data]);

Use useCallback() for function props:

const handleClick = useCallback((id: string) => {
  // handler logic
}, []);

2. Code Splitting

Use React.lazy() for route-based splitting:

const Dashboard = lazy(() => import('@/components/Dashboard'));

<Suspense fallback={<Loading />}>
  <Dashboard />
</Suspense>

Use dynamic imports for large libraries:

// Only load when needed
const loadChart = async () => {
  const Chart = await import('chart.js');
  return Chart;
};

3. List Optimization

Always use stable keys:

// ✅ Good - stable ID
{items.map(item => <Item key={item.id} {...item} />)}

// ❌ Bad - index as key
{items.map((item, i) => <Item key={i} {...item} />)}

Virtualize long lists:

import { useVirtualizer } from '@tanstack/react-virtual';

const virtualizer = useVirtualizer({
  count: items.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 50,
});

Next.js Specific Optimizations

Image Optimization

import Image from 'next/image';

// Use priority for above-the-fold images
<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />

// Lazy load below-the-fold
<Image src="/product.jpg" alt="Product" width={400} height={400} loading="lazy" />

Font Optimization

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'], display: 'swap' });

<main className={inter.className}>{children}</main>

Caching Strategies

// Static Generation with revalidation
export const revalidate = 3600; // 1 hour

// Fetch with caching
fetch(url, {
  next: { revalidate: 3600, tags: ['posts'] }
});