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

## When to Invoke
Invoke this skill whenever you need to:
- use react 19 useoptimistic
- optimistic like button react
- handle rollback optimistic state

## Execution SOP & Rules
1. Initialize: const [optimisticItems, addOptimisticItem] = useOptimistic(items, (state, update) => [...state, update]).
2. Call addOptimisticItem(newItem) inside form action or startTransition before awaiting server call.
3. Await the Server Action; if an error occurs, React automatically resets state to latest confirmed server props.
4. Provide subtle visual cues (e.g. opacity: 0.7) for items currently in an optimistic state.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.