hardFrontend

How do you do optimistic updates in Next.js (useOptimistic, useActionState)?

Q: How do you do optimistic updates in Next.js (useOptimistic, useActionState)?

**TL;DR.** useOptimistic applies a **temporary optimistic state immediately** while the Server Action is pending, **reverting** if it fails. useActionState tracks the action's **result and pending status**. Together they give responsive forms/mutations with proper **rollback**. optimistic UI shown instantly action runs server confirms <path class='d-edge-dashed'

960 views

Understand the problem

Instant UI feedback while a Server Action runs.

nextjsuseoptimisticuseactionstateserver-actions

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Optimistic like button

'use client';
import { useOptimistic } from 'react';
import { toggleLike } from './actions';

export function Like({ post }) {
  const [likes, addOptimistic] = useOptimistic(post.likes);
  return (
    <form action={async () => { addOptimistic(likes + 1); await toggleLike(post.id); }}>
      <button>♥ {likes}</button>   {/* updates instantly, reverts if action fails */}
    </form>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you handle instrumentation and observability in Next.js (instrumentation.ts)?

What are Server Actions in Next.js and how do they work?