The Complete Production SOP: How to Deploy and Run React 19 useOptimistic Instant UI Updates in Autonomous AI Agents

---
name: "react-19-use-optimistic"
description: "Render instant client UI state updates while asynchronous server mutations are in-flight."
metadata:
  author: "React"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "use react 19 useoptimistic"
  - "optimistic like button react"
  - "handle rollback optimistic state"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# React 19 useOptimistic Instant UI Updates

Implements React 19 useOptimistic: managing optimistic state transitions (likes, comments, cart additions), handling server rollbacks on failure, preventing UI layout flickers, and composing with Server Actions.

## Execution SOP & Rules
1. Initialize: const [optimisticState, setOptimistic] = useOptimistic(passthroughState, updateFn).
2. Call setOptimistic(payload) synchronously inside startTransition or an async Form Action BEFORE the mutation promise resolves.
3. Await the Server Action; if an unhandled error throws, React automatically purges the optimistic state back to confirmed props.
4. Apply visual treatment (e.g. opacity: 0.7, data-pending="true") to communicate pending state to the user.

{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

'use client';

import { useOptimistic, startTransition } from 'react';

interface LikeState {
  count: number;
  hasLiked: boolean;
  isPending?: boolean;
}

interface Props {
  initialState: LikeState;
  onLikeAction: (nextLiked: boolean) => Promise<{ count: number; hasLiked: boolean }>;
}

export function OptimisticLikeButton({ initialState, onLikeAction }: Props) {
  const [optimistic, setOptimistic] = useOptimistic(
    initialState,
    (current: LikeState, update: boolean): LikeState => ({
      count: update ? current.count + 1 : Math.max(0, current.count - 1),
      hasLiked: update,
      isPending: true
    })
  );

  const handleToggle = async () => {
    const nextLiked = !optimistic.hasLiked;
    startTransition(async () => {
      setOptimistic(nextLiked);
      try {
        await onLikeAction(nextLiked);
      } catch (err) {
        // Error triggers React rollback automatically on next tick
        console.error('Server mutation failed, state rolling back', err);
      }
    });
  };

  return (
    <button
      type="button"
      onClick={handleToggle}
      aria-pressed={optimistic.hasLiked}
      data-pending={optimistic.isPending ? 'true' : 'false'}
      style={{ opacity: optimistic.isPending ? 0.6 : 1.0, transition: 'opacity 0.2s ease' }}
    >
      <span>{optimistic.hasLiked ? 'Liked' : 'Like'}</span>
      <span>({optimistic.count})</span>
    </button>
  );
}

#!/usr/bin/env bash
set -euo pipefail

echo "Validating TypeScript types..."
npx tsc --noEmit

echo "Checking for invalid hook invocations..."
npx eslint src/components/OptimisticLikeButton.tsx

echo "Verification successful."