React 19 New Features Explained — Actions, use(), and the Compiler

import { useActionState } from 'react';

// This is the Action — an async function React will manage for us.
// It receives the previous state and the FormData from the submission.
async function submitContactForm(previousState, formData) {
  const name = formData.get('name');
  const message = formData.get('message');

  // Simulate a real API call — could be fetch(), a server action, anything async
  const response = await fetch('/api/contact', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name, message }),
  });

  if (!response.ok) {
    // Returning an object with an error key is the convention for signaling failure
    return { error: 'Message failed to send. Please try again.' };
  }

  // Returning a success payload — this becomes the new `state` below
  return { success: true, message: `Thanks ${name}, we'll be in touch!` };
}

export default function ContactForm() {
  // useActionState wires up the action and gives us:
  //   state    — the current result (starts as null)
  //   dispatch — the function to call to trigger the action
  //   isPending — true while the async action is running
  const [state, dispatch, isPending] = useActionState(submitContactForm, null);

  return (
    // Pass dispatch as the form's action — React calls it on submit with FormData
    <form action={dispatch}>
      <label>
        Name
        <input name="name" type="text" required />
      </label>

      <label>
        Message
        <textarea name="message" required />
      </label>

      {/* Show error feedback from the action's return value */}
      {state?.error && (
        <p style={{ color: 'red' }}>{state.error}</p>
      )}

      {/* Show success feedback */}
      {state?.success && (
        <p style={{ color: 'green' }}>{state.message}</p>
      )}

      {/* isPending comes straight from React — no manual useState needed */}
      <button type="submit" disabled={isPending}>
        {isPending ? 'Sending...' : 'Send Message'}
      </button>
    </form>
  );
}

import { useOptimistic, useState } from 'react';

// Simulated API call — imagine this is hitting your backend
async function toggleLikeOnServer(postId, currentlyLiked) {
  await new Promise(resolve => setTimeout(resolve, 600)); // Simulate latency

  // In a real app this would be: await fetch(`/api/posts/${postId}/like`, ...)
  // For demo purposes, we just return the toggled value
  return !currentlyLiked;
}

export default function LikeButton({ postId, initialLikeCount, initiallyLiked }) {
  // This is the REAL state — what the server has confirmed
  const [isLiked, setIsLiked] = useState(initiallyLiked);
  const [likeCount, setLikeCount] = useState(initialLikeCount);

  // useOptimistic takes: real value, and a function to compute the optimistic value
  // The second arg receives (currentState, optimisticValue) — the optimisticValue
  // is whatever you pass to setOptimisticLiked() below
  const [optimisticIsLiked, setOptimisticLiked] = useOptimistic(
    isLiked,
    (currentIsLiked, newLikedValue) => newLikedValue // Simply replace with the optimistic value
  );

  async function handleLikeToggle() {
    const nextLikedValue = !isLiked;

    // This IMMEDIATELY updates the UI — no waiting for the server
    setOptimisticLiked(nextLikedValue);

    // Also update the count optimistically in the UI
    setLikeCount(prev => nextLikedValue ? prev + 1 : prev - 1);

    try {
      // Now do the real work — React keeps the optimistic UI until this resolves
      const confirmedValue = await toggleLikeOnServer(postId, isLiked);

      // Commit the real server-confirmed value to state
      setIsLiked(confirmedValue);
    } catch (error) {
      // If the server call fails, React automatically reverts optimisticIsLiked
      // We also need to roll back our manual likeCount update
      setLikeCount(prev => nextLikedValue ? prev - 1 : prev + 1);
      console.error('Failed to update like status:', error);
    }
  }

  return (
    <button
      onClick={handleLikeToggle}
      aria-label={optimisticIsLiked ? 'Unlike post' : 'Like post'}
      style={{
        background: optimisticIsLiked ? '#e0245e' : '#ccc',
        color: 'white',
        border: 'none',
        padding: '8px 16px',
        borderRadius: '20px',
        cursor: 'pointer',
      }}
    >
      {/* Use the OPTIMISTIC value for instant visual feedback */}
      {optimisticIsLiked ? '❤️' : '🤍'} {likeCount}
    </button>
  );
}

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

// --- Context example: use() with conditional reads ---
const ThemeContext = createContext('light');

function ThemedBadge({ isAdmin }) {
  // This was IMPOSSIBLE with useContext — you couldn't call it conditionally
  // Now with use(), we can read context only when we actually need it
  if (!isAdmin) {
    return <span className="badge">Member</span>;
  }

  // Called conditionally — totally valid with use()
  const theme = use(ThemeContext);

  return (
    <span className={`badge badge--${theme} badge--admin`}>
      Admin
    </span>
  );
}

// --- Promise example: use() with Suspense ---

// IMPORTANT: Create the promise OUTSIDE the component.
// If you write `const userPromise = fetchUser()` inside UserCard,
// it creates a NEW promise every render → infinite suspension loop.
const userDataPromise = fetchUserFromAPI(42); // Created once, at module level

function UserCard() {
  // use() suspends this component until the promise resolves.
  // No useState, no useEffect, no loading check needed here.
  const user = use(userDataPromise);

  return (
    <div className="user-card">
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// The parent wraps with Suspense to handle the loading state
export default function ProfilePage() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedBadge isAdmin={true} />

      {/* Suspense shows the fallback while UserCard's promise resolves */}
      <Suspense fallback={
        <div className="skeleton" aria-busy="true">Loading profile...</div>
      }>
        <UserCard />
      </Suspense>
    </ThemeContext.Provider>
  );
}

// Simulated fetch — in real life this is your API call
async function fetchUserFromAPI(userId) {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) throw new Error(`User ${userId} not found`);
  return response.json();
  // Returns: { id: 42, name: 'Sarah Chen', email: 'sarah@example.com' }
}

// BEFORE the React Compiler — what you had to write manually
import { useMemo, useCallback, memo } from 'react';

const ProductCard = memo(function ProductCard({ product, onAddToCart }) {
  // memo() prevents re-renders when parent re-renders but props haven't changed
  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button onClick={() => onAddToCart(product.id)}>Add to Cart</button>
    </div>
  );
});

function ProductListBefore({ products, taxRate, userId }) {
  // useMemo to avoid recalculating prices on every render
  const productsWithTax = useMemo(() => {
    return products.map(p => ({
      ...p,
      price: (p.basePrice * (1 + taxRate)).toFixed(2),
    }));
  }, [products, taxRate]); // Easy to forget a dependency here

  // useCallback to keep the function reference stable for memo(ProductCard)
  const handleAddToCart = useCallback((productId) => {
    fetch(`/api/cart/${userId}/add`, {
      method: 'POST',
      body: JSON.stringify({ productId }),
    });
  }, [userId]); // If you forget userId here, you get a stale closure bug

  return productsWithTax.map(product => (
    <ProductCard key={product.id} product={product} onAddToCart={handleAddToCart} />
  ));
}

// ─────────────────────────────────────────────────────
// AFTER the React Compiler — what you write instead
// The compiler transforms this into the equivalent of the code above
import { useState } from 'react';

function ProductCard({ product, onAddToCart }) {
  // No memo() wrapper needed — compiler handles it
  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button onClick={() => onAddToCart(product.id)}>Add to Cart</button>
    </div>
  );
}

function ProductListAfter({ products, taxRate, userId }) {
  // No useMemo — compiler sees taxRate and products are dependencies
  // and automatically memoizes this calculation
  const productsWithTax = products.map(p => ({
    ...p,
    price: (p.basePrice * (1 + taxRate)).toFixed(2),
  }));

  // No useCallback — compiler tracks that userId is the only dependency
  // and keeps the function reference stable automatically
  function handleAddToCart(productId) {
    fetch(`/api/cart/${userId}/add`, {
      method: 'POST',
      body: JSON.stringify({ productId }),
    });
  }

  return productsWithTax.map(product => (
    <ProductCard key={product.id} product={product} onAddToCart={handleAddToCart} />
  ));
}

// Both versions produce the SAME runtime behavior and performance.
// The compiler version is just dramatically easier to read and maintain.