React 19.2: Transforming Application Development

# Install the React Compiler
npm install --save-dev babel-plugin-react-compiler

# For Next.js projects
npm install next@latest react@rc react-dom@rc

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

export default nextConfig;

import { useMemo, useCallback, memo } from 'react';

interface ProductListProps {
  products: Product[];
  onFilter: (query: string) => void;
}

// Manual memoization everywhere
const ProductList = memo(({ products, onFilter }: ProductListProps) => {
  // Manual useMemo for expensive calculations
  const sortedProducts = useMemo(() => {
    return products.sort((a, b) => b.rating - a.rating);
  }, [products]);

  // Manual useCallback for event handlers
  const handleSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    onFilter(e.target.value);
  }, [onFilter]);

  const discountedTotal = useMemo(() => {
    return sortedProducts.reduce((sum, p) => sum + p.discountedPrice, 0);
  }, [sortedProducts]);

  return (
    <div>
      <input onChange={handleSearch} placeholder="Search..." />
      <p>Total: ${discountedTotal}</p>
      {sortedProducts.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
});

ProductList.displayName = 'ProductList';

import type { Product } from '@/types';

interface ProductListProps {
  products: Product[];
  onFilter: (query: string) => void;
}

// No memo, useMemo, or useCallback needed!
export default function ProductList({ products, onFilter }: ProductListProps) {
  // Compiler automatically memoizes this
  const sortedProducts = products.sort((a, b) => b.rating - a.rating);

  // Compiler automatically optimizes this handler
  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    onFilter(e.target.value);
  };

  // Compiler automatically memoizes this calculation
  const discountedTotal = sortedProducts.reduce((sum, p) => sum + p.discountedPrice, 0);

  return (
    <div>
      <input onChange={handleSearch} placeholder="Search..." />
      <p>Total: ${discountedTotal}</p>
      {sortedProducts.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

import { useState, useEffect } from 'react';

function ChatRoom({ roomId, theme }: { roomId: string; theme: string }) {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();

    connection.on('message', (msg) => {
      // Problem: theme is stale! Won't reflect latest value
      console.log(`[${theme}] New message: ${msg}`);
    });

    return () => connection.disconnect();
  }, [roomId]); // Can't add theme without reconnecting

  return <div>...</div>;
}

import { useState, useEffect, experimental_useEffectEvent as useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }: { roomId: string; theme: string }) {
  const [message, setMessage] = useState('');

  // Extract the event handler that needs latest props
  const onMessage = useEffectEvent((msg: string) => {
    // theme is ALWAYS current, no stale closures!
    console.log(`[${theme}] New message: ${msg}`);
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();

    // Use the event inside effect
    connection.on('message', onMessage);

    return () => connection.disconnect();
  }, [roomId]); // Only depends on roomId, theme changes don't trigger reconnect

  return <div>...</div>;
}

import { useEffect, experimental_useEffectEvent as useEffectEvent } from 'react';
import { trackEvent } from '@/lib/analytics';

function ProductPage({ productId, user, preferences }: Props) {
  // Event has access to latest user and preferences
  const logView = useEffectEvent(() => {
    trackEvent('product_view', {
      productId,
      userId: user.id,
      theme: preferences.theme,
      timestamp: Date.now()
    });
  });

  useEffect(() => {
    logView();
    
    // Track time on page
    const startTime = Date.now();
    return () => {
      const duration = Date.now() - startTime;
      trackEvent('product_view_duration', { productId, duration });
    };
  }, [productId]); // Only re-track when product changes

  return <div>...</div>;
}

import { Activity, Suspense } from 'react';
import { use } from 'react';

function UserDashboard({ userPromise }: { userPromise: Promise<User> }) {
  return (
    <Activity>
      <Suspense fallback={<DashboardSkeleton />}>
        <DashboardContent userPromise={userPromise} />
      </Suspense>
    </Activity>
  );
}

function DashboardContent({ userPromise }: { userPromise: Promise<User> }) {
  // use() hook unwraps promises
  const user = use(userPromise);

  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <Activity>
        <Suspense fallback={<p>Loading stats...</p>}>
          <UserStats userId={user.id} />
        </Suspense>
      </Activity>
    </div>
  );
}