Million.js React Optimization

# Million.js React Optimization for Google Antigravity IDE

Supercharge React performance with Million.js using Google Antigravity IDE. This guide covers compiler setup, block optimization, and directive usage patterns.

## Setup and Configuration

```typescript
// next.config.ts
import million from "million/compiler";

const nextConfig = { reactStrictMode: true };

export default million.next(nextConfig, {
  auto: {
    threshold: 0.05,
    skip: ["Header", "Footer", "*Provider*"],
  },
  rsc: true,
});
```

## Block Component Pattern

```typescript
// src/components/DataGrid.tsx
import { block, For } from "million/react";

interface DataRow {
  id: string;
  name: string;
  email: string;
  status: "active" | "inactive" | "pending";
}

const DataRowBlock = block(function DataRow({
  row,
  isSelected,
  onClick,
}: {
  row: DataRow;
  isSelected: boolean;
  onClick: () => void;
}) {
  return (
    <tr className={`data-row ${isSelected ? "selected" : ""}`} onClick={onClick}>
      <td><input type="checkbox" checked={isSelected} readOnly /></td>
      <td>{row.name}</td>
      <td>{row.email}</td>
      <td><span className={`status-badge status-${row.status}`}>{row.status}</span></td>
    </tr>
  );
});

export function DataGrid({ data, onRowClick, selectedIds = new Set() }: {
  data: DataRow[];
  onRowClick?: (row: DataRow) => void;
  selectedIds?: Set<string>;
}) {
  return (
    <table className="data-grid">
      <thead>
        <tr><th></th><th>Name</th><th>Email</th><th>Status</th></tr>
      </thead>
      <tbody>
        <For each={data}>
          {(row) => (
            <DataRowBlock
              key={row.id}
              row={row}
              isSelected={selectedIds.has(row.id)}
              onClick={() => onRowClick?.(row)}
            />
          )}
        </For>
      </tbody>
    </table>
  );
}
```

## Directive Optimization

```typescript
// src/components/ProductCard.tsx
"use million"; // Enable Million.js for this file

import Image from "next/image";
import Link from "next/link";

export function ProductCard({ product }: { product: Product }) {
  const formatPrice = (price: number) => {
    return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(price);
  };

  return (
    <Link href={`/products/${product.id}`} className="product-card">
      <div className="product-image">
        <Image src={product.image} alt={product.name} width={200} height={200} loading="lazy" />
        {!product.inStock && <span className="out-of-stock-badge">Out of Stock</span>}
      </div>
      <div className="product-info">
        <h3 className="product-name">{product.name}</h3>
        <div className="product-rating">
          {Array.from({ length: 5 }).map((_, i) => (
            <span key={i} className={`star ${i < product.rating ? "filled" : ""}`}>star</span>
          ))}
          <span className="review-count">({product.reviewCount})</span>
        </div>
        <p className="product-price">{formatPrice(product.price)}</p>
      </div>
    </Link>
  );
}
```

## Virtual List with For

```typescript
// src/components/VirtualList.tsx
import { For } from "million/react";
import { useVirtualizer } from "@tanstack/react-virtual";
import { useRef } from "react";

export function VirtualList({ items, estimateSize = 50 }: { items: Array<{ id: string; content: string }>; estimateSize?: number }) {
  const parentRef = useRef<HTMLDivElement>(null);
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => estimateSize,
    overscan: 5,
  });

  return (
    <div ref={parentRef} style={{ height: "400px", overflow: "auto" }}>
      <div style={{ height: `${virtualizer.getTotalSize()}px`, position: "relative" }}>
        <For each={virtualizer.getVirtualItems()}>
          {(virtualRow) => {
            const item = items[virtualRow.index];
            return (
              <div
                key={item.id}
                style={{
                  position: "absolute",
                  top: 0,
                  width: "100%",
                  height: `${virtualRow.size}px`,
                  transform: `translateY(${virtualRow.start}px)`,
                }}
              >
                {item.content}
              </div>
            );
          }}
        </For>
      </div>
    </div>
  );
}
```

## Best Practices for Google Antigravity IDE

When using Million.js with Google Antigravity, use auto mode for automatic optimization. Apply block() to frequently re-rendering components. Use For instead of map for lists. Skip components with complex state. Let Gemini 3 identify render bottlenecks and suggest Million.js optimizations.

Google Antigravity excels at analyzing React components and applying Million.js patterns.