react-performance

# React Performance Optimization

Master react performance optimization for building high-performance, scalable
React applications with industry best practices.

## React.memo and Component Memoization

React.memo prevents unnecessary re-renders by memoizing component output:

```typescript
import { memo } from 'react';

interface Props {
  name: string;
  onClick: () => void;
}

// Basic memoization
const ExpensiveComponent = memo(
  function ExpensiveComponent({ name, onClick }: Props) {
  console.log('Rendering ExpensiveComponent');
  return <button onClick={onClick}>{name}</button>;
});

// Custom comparison function
const CustomMemo = memo(
  function Component({ user }: { user: User }) {
    return <div>{user.name}</div>;
  },
  (prevProps, nextProps) => {
    // Return true if passing nextProps would return the same result as prevProps
    return prevProps.user.id === nextProps.user.id;
  }
);

// When to use custom comparison
const ProductCard = memo(
  function ProductCard({ product }: { product: Product }) {
    return (
      <div>
        <h3>{product.name}</h3>
        <p>${product.price}</p>
      </div>
    );
  },
  (prev, next) => {
    // Only re-render if these specific fields change
    return (
      prev.product.id === next.product.id &&
      prev.product.name === next.product.name &&
      prev.product.price === next.product.price
    );
  }
);
```

## useMemo for Expensive Computations

```typescript
import { useMemo, useState } from 'react';

function DataTable({ items }: { items: Item[] }) {
  const [filter, setFilter] = useState('');
  const [sortBy, setSortBy] = useState<'name' | 'price'>('name');

  // Expensive filtering and sorting
  const processedItems = useMemo(() => {
    console.log('Computing filtered and sorted items');
    return items
      .filter(item => item.name.toLowerCase().includes(filter.toLowerCase()))
      .sort((a, b) => {
        if (sortBy === 'name') {
          return a.name.localeCompare(b.name);
        }