Handling race conditions and cache invalidation in Next.js 16 optimistic UI

Short summary

A practical deep dive into race conditions and failure handling with Next.js 16's useOptimistic hook. The author shows how rapid clicks on an optimistic checkbox can desync the UI from the database, and solves it with per-row pending-state locking. Also covers automatic optimistic reverts, the differences between revalidatePath, revalidateTag, and updateTag for cache invalidation, and the new unstable_retry error recovery prop in Next.js 16.2.

• •Per-row pending-state locking prevents race conditions from rapid clicks on optimistic UI elements
• •useOptimistic auto-reverts on transition settle for toggles, but failed inserts need manual cleanup
• •Next.js 16 introduces updateTag for immediate cache expiry and unstable_retry for server-side error recovery

Generated with AI, which can make mistakes.