// Before React Compiler: Manual memoization (common but error-prone)
import { useMemo, useCallback, memo } from 'react';

const ExpensiveList = memo(({ items, onSelect, filter }: Props) => {
  const filteredItems = useMemo(
    () => items.filter(item => item.category === filter),
    [items, filter]
  );
  
  const handleSelect = useCallback(
    (id: string) => onSelect(id),
    [onSelect]
  );
  
  return (
    <ul>
      {filteredItems.map(item => (
        <ListItem key={item.id} item={item} onSelect={handleSelect} />
      ))}
    </ul>
  );
});

// After React Compiler: Write plain components, compiler handles optimization
// No memo(), useMemo(), useCallback() needed
const ExpensiveList = ({ items, onSelect, filter }: Props) => {
  const filteredItems = items.filter(item => item.category === filter);
  
  const handleSelect = (id: string) => onSelect(id);
  
  return (
    <ul>
      {filteredItems.map(item => (
        <ListItem key={item.id} item={item} onSelect={handleSelect} />
      ))}
    </ul>
  );
};
// The compiler automatically memoizes filteredItems and handleSelect
// based on their dependency analysis

// ❌ Direct mutations (breaks React's model)
const Component = () => {
  const data = someArray;
  data.push(newItem);  // Mutation — compiler can't reason about this
  return <List items={data} />;
};

// ✅ Immutable updates (compiler-friendly)
const Component = () => {
  const data = [...someArray, newItem];  // New reference, compiler understands
  return <List items={data} />;
};

// ❌ Non-React side effects in render
const Component = () => {
  document.title = 'New Title';  // Compiler won't deduplicate this
  return <div />;
};

// ✅ Use effects for side effects
const Component = () => {
  useEffect(() => { document.title = 'New Title'; }, []);
  return <div />;
};

import { useState, useTransition } from 'react';

interface SearchResult {
  id: string;
  title: string;
  relevance: number;
}

export function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<SearchResult[]>([]);
  const [isPending, startTransition] = useTransition();
  
  const handleSearch = (newQuery: string) => {
    // This update is urgent — update the input immediately
    setQuery(newQuery);
    
    // This update is deferrable — React can interrupt it if needed
    startTransition(async () => {
      const data = await searchAPI(newQuery);
      setResults(data);
    });
  };
  
  return (
    <div>
      <input
        value={query}
        onChange={e => handleSearch(e.target.value)}
        placeholder="Search..."
        // Input stays responsive even while search results are loading
      />
      
      {isPending ? (
        <div className="opacity-50">
          <ResultsList results={results} />
          <Spinner />
        </div>
      ) : (
        <ResultsList results={results} />
      )}
    </div>
  );
}

import { useState, useDeferredValue, memo } from 'react';

// Expensive visualization component
const DataVisualization = memo(({ data }: { data: DataPoint[] }) => {
  // This renders ~300 SVG elements — expensive
  return (
    <svg>
      {data.map((point, i) => (
        <circle key={i} cx={point.x} cy={point.y} r={3} />
      ))}
    </svg>
  );
});

export function Dashboard({ liveData }: { liveData: DataPoint[] }) {
  // liveData updates every 100ms from WebSocket
  // We don't need the visualization to keep up — defer it
  const deferredData = useDeferredValue(liveData);
  
  const isStale = liveData !== deferredData;
  
  return (
    <div>
      {/* This always shows current data */}
      <MetricsSummary data={liveData} />
      
      {/* This uses deferred data — updates when React has time */}
      <div style=>
        <DataVisualization data={deferredData} />
      </div>
    </div>
  );
}

import { Suspense, use } from 'react';

// Server Component (Next.js / React Server Components)
async function UserProfile({ userId }: { userId: string }) {
  // In Server Components, async/await works directly
  const user = await fetchUser(userId);
  const posts = await fetchUserPosts(userId);
  
  return (
    <div>
      <h1>{user.name}</h1>
      <PostList posts={posts} />
    </div>
  );
}

// Client Component using the `use()` hook
function AsyncUserBadge({ userPromise }: { userPromise: Promise<User> }) {
  // `use()` suspends the component until the promise resolves
  const user = use(userPromise);
  
  return (
    <div className="badge">
      <img src={user.avatar} alt={user.name} />
      <span>{user.name}</span>
    </div>
  );
}

// Parent component with Suspense boundary
function App() {
  const userPromise = fetchCurrentUser();
  
  return (
    <Suspense fallback={<BadgeSkeleton />}>
      <AsyncUserBadge userPromise={userPromise} />
    </Suspense>
  );
}

// app/products/page.tsx (Server Component — runs on server)
import { ProductGrid } from './product-grid';  // Client Component
import { fetchProducts } from '@/lib/api';

// This component: never ships to the client, accesses DB directly,
// renders to a special wire format that React can stream
export default async function ProductsPage({
  searchParams
}: {
  searchParams: { category?: string; sort?: string }
}) {
  // Direct DB access — no API layer needed
  const products = await db.products.findMany({
    where: { category: searchParams.category },
    orderBy: { [searchParams.sort || 'name']: 'asc' }
  });
  
  return (
    <main>
      <h1>Products</h1>
      {/* ProductGrid is a Client Component — handles interactivity */}
      <ProductGrid initialProducts={products} />
    </main>
  );
}

// components/product-grid.tsx (Client Component — runs in browser)
'use client';

import { useState } from 'react';

export function ProductGrid({ initialProducts }: { initialProducts: Product[] }) {
  const [products, setProducts] = useState(initialProducts);
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  
  const toggleSelect = (id: string) => {
    setSelectedIds(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };
  
  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map(product => (
        <ProductCard
          key={product.id}
          product={product}
          selected={selectedIds.has(product.id)}
          onSelect={() => toggleSelect(product.id)}
        />
      ))}
    </div>
  );
}

// What Zustand handles well: global app state
import { create } from 'zustand';
import { persist, immer } from 'zustand/middleware';

interface AppStore {
  user: User | null;
  cart: CartItem[];
  notifications: Notification[];
  
  setUser: (user: User | null) => void;
  addToCart: (item: CartItem) => void;
  removeFromCart: (itemId: string) => void;
  dismissNotification: (id: string) => void;
}

export const useAppStore = create<AppStore>()(
  persist(
    immer((set) => ({
      user: null,
      cart: [],
      notifications: [],
      
      setUser: (user) => set(state => { state.user = user; }),
      
      addToCart: (item) => set(state => {
        const existing = state.cart.find(i => i.id === item.id);
        if (existing) {
          existing.quantity += 1;
        } else {
          state.cart.push({ ...item, quantity: 1 });
        }
      }),
      
      removeFromCart: (itemId) => set(state => {
        state.cart = state.cart.filter(i => i.id !== itemId);
      }),
      
      dismissNotification: (id) => set(state => {
        state.notifications = state.notifications.filter(n => n.id !== id);
      }),
    })),
    { name: 'app-storage', partialize: (state) => ({ cart: state.cart }) }
  )
);

// What you don't need Zustand for anymore:
// - Server data → TanStack Query / SWR
// - Form state → React Hook Form
// - URL state → useSearchParams
// - Local component state → useState
// - Derived state → useMemo (or just compute inline with compiler)

import { Profiler, ProfilerOnRenderCallback } from 'react';

const onRenderCallback: ProfilerOnRenderCallback = (
  id,           // The "id" prop of the Profiler tree
  phase,        // "mount" or "update"
  actualDuration,   // Time spent rendering the committed update
  baseDuration,     // Estimated time to render without memoization
  startTime,    // When React began rendering this update
  commitTime    // When React committed this update
) => {
  // Send to your analytics
  if (actualDuration > 16) {  // Flag renders > 1 frame (16ms)
    analytics.track('slow_render', {
      component: id,
      phase,
      actualDuration,
      baseDuration,
      // memoization efficiency:
      memoEfficiency: 1 - (actualDuration / baseDuration)
    });
  }
};

// Wrap critical paths
export function App() {
  return (
    <Profiler id="ProductCatalog" onRender={onRenderCallback}>
      <ProductCatalog />
    </Profiler>
  );
}