React 19 use() Hook — Fix Infinite Suspension Loop

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>
  );
}

// Quick signatures for each API

// 1. useActionState
const [state, dispatch, isPending] = useActionState(
  async (prevState, formData) => {
    // ... handle submission
    return { success: true };
  },
  null
);

// 2. useFormStatus (in a child component)
function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? 'Saving...' : 'Save'}</button>;
}

// 3. useOptimistic
const [optimisticCount, setOptimisticCount] = useOptimistic(
  realCount,
  (current, newVal) => current + 1
);

// 4. form action
<form action={dispatch}> // dispatch triggers the action with FormData

// 5. startTransition
import { startTransition } from 'react';
startTransition(async () => {
  const result = await serverAction();
  setState(result);
});

// 6. Server Action (in a file with "use server")
"use server";
export async function addToCart(productId) {
  // runs on server, receives serialized data
  await db.products.add(userId, productId);
}

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 REACT 19 (still works in 19, but unnecessary) ───
import { forwardRef, useRef, useEffect } from 'react';

const OldStyledInput = forwardRef(function OldStyledInput(props, ref) {
  // forwardRef adds an extra layer of function signature
  return (
    <input
      ref={ref}
      style={{ border: '1px solid blue' }}
      {...props}
    />
  );
});

function OldParent() {
  const inputRef = useRef(null);
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);
  return <OldStyledInput ref={inputRef} placeholder="Old way" />;
}

// ─── IN REACT 19: ref as a regular prop ───
// No forwardRef needed! Just name a prop 'ref' and it works.
function NewStyledInput({ ref, ...props }) {
  return (
    <input
      ref={ref}
      style={{ border: '2px solid green' }}
      {...props}
    />
  );
}

function NewParent() {
  const inputRef = useRef(null);
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);
  return <NewStyledInput ref={inputRef} placeholder="New way" />;
}

// Both produce identical behavior: the parent obtains a ref to the input element.
// The new approach is clearer and closer to how developers expect refs to work.

// ⚠️ For class components, you still need forwardRef:
class ClassInput extends React.Component {
  render() {
    return <input ref={this.props.ref} />; // This alone does NOT forward
  }
}
// Must wrap: const ClassInputForwarded = forwardRef((props, ref) => <ClassInput {...props} ref={ref} />);

// 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.

import { useFormStatus } from 'react-dom';

export default function SubmitButton({ children }) {
  // This works because the button is inside a <form> with action={dispatch}
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : children}
    </button>
  );
}

// Usage in a parent form:
// <form action={dispatch}>
//   <input name="email" />
//   <SubmitButton>Send</SubmitButton>
// </form>

// ─── Server Component (no directive) ───
// This file runs on the server only.
// It can directly query a database.
import { getPosts } from '@/lib/db';
import LikeButton from './LikeButton'; // client component

export default async function PostList() {
  const posts = await getPosts(); // direct DB access
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
          <LikeButton postId={post.id} /> {/* client component with interactivity */}
        </li>
      ))}
    </ul>
  );
}

// ─── Client Component (with 'use client') ───
// This file runs in the browser.
'use client';

import { useState } from 'react';

export default function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? '❤️' : '🤍'}
    </button>
  );
}

// ─── Server Action (in a file with 'use server') ───
'use server';

export async function addLike(postId) {
  // runs on server, can directly mutate DB
  const db = await connect();
  await db.likes.insert({ postId, timestamp: new Date() });
}