The useOptimistic hook enables optimistic UI updates that show immediately while async operations complete. Here's how to use it.
Basic Usage
Loading code block...
Like Button
Loading code block...
Message Sending
Loading code block...
Delete with Undo
Loading code block...
Form Submission
Loading code block...
Toggle with Multiple States
Loading code block...
Cart Updates
Loading code block...
Error Handling
Loading code block...
Batch Operations
Loading code block...
Best Practices
When to Use:
✓ Likes/favorites/bookmarks
✓ Adding items to lists
✓ Form submissions
✓ Toggle states
✓ Real-time updates
Patterns:
✓ Show pending state visually
✓ Handle errors gracefully
✓ Revert on failure
✓ Use with server actions
Visual Feedback:
✓ Reduce opacity for pending
✓ Show loading indicators
✓ Disable during update
✓ Clear error states
Avoid:
✗ Critical data without confirmation
✗ Complex multi-step operations
✗ Operations that can't be reverted
✗ Ignoring error states
Conclusion
The useOptimistic hook provides immediate UI feedback while async operations complete in the background. Use it for actions like likes, adding items, and form submissions where instant feedback improves perceived performance. Always provide visual indicators for pending states and handle errors gracefully by reverting the UI when operations fail. Combine with server actions for a seamless optimistic update pattern.