React Actions & Optimistic UI

Build React Actions & Optimistic UI as a user flow with pending, success, empty, error, retry, cancellation, and navigation recovery states. Give every route or asynchronous boundary intentional fallback and recovery behavior.

Build a Complete Mental Model

Build React Actions & Optimistic UI as a user flow with pending, success, empty, error, retry, cancellation, and navigation recovery states. Give every route or asynchronous boundary intentional fallback and recovery behavior.

Apply It in Production React

Test an original React Actions & Optimistic UI example with empty/loading/error states, keyboard-only interaction, a slow network, rapid repeated events, and component unmount/remount cases. Verify behavior with the browser console, React DevTools, tests, and profiler where relevant.

After This Lesson

• Explain the source of truth and component boundary
• Build an example with keyboard and failure states
• Verify one user-visible behavior with a test or profiler

import { startTransition, useOptimistic, useState } from 'react';

export default function LikeButton({ saveLike }) {
  const [liked, setLiked] = useState(false);
  const [optimisticLiked, setOptimisticLiked] = useOptimistic(liked);

  function toggle() {
    const next = !optimisticLiked;
    startTransition(async () => {
      setOptimisticLiked(next);
      const saved = await saveLike(next);
      setLiked(saved);
    });
  }
  return <button onClick={toggle}>{optimisticLiked ? 'Liked' : 'Like'}</button>;
}

The button responds immediately and converges on the server-confirmed value.

useOptimistic — React