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

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

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Hard > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block says which version it ran on. ## 1. Why This Even Matters — A Story First Posting a letter and immediately ticking it off your to-do list is optimistic: you assume it will arrive. If it comes back undelivered, you untick it and fix the address. useOptimistic is that tick: shown right away, replaced by the truth when the post office answers. ## 2. The Core Idea 📌 **Interview term: useOptimistic** — a React hook that returns a temporary value reflecting an expected change while an async actio

The problem

Question presented to candidate: "A like button feels slow because the server takes a second and a half. How do you make it feel instant with useOptimistic, and what happens if the server rejects the like?"

What a strong answer should cover:

useOptimistic(state, updateFn) returns a value that shows an optimistic change while an action or transition is pending.
Call the optimistic setter inside a transition (a form action or startTransition) together with the real action.
When the action finishes, React discards the optimistic value and shows the real state from the server.
If the action fails or returns an unchanged state, the optimistic change disappears automatically; show an error from the action result.
useActionState holds the server result and a pending flag; the two hooks are usually used together.

Clarifying questions expected:

"Can the action fail, and how should that look?" — decides the error message and whether to retry.
"Is the change safe to show before it is confirmed?" — optimistic UI suits likes and toggles, not payments.

Code / implementation expected: Yes — a like button with useOptimistic and useActionState.

nextjs
useoptimistic
useactionstate
server-actions

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Hard

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block says which version it ran on.

1. Why This Even Matters — A Story First

Posting a letter and immediately ticking it off your to-do list is optimistic: you assume it will arrive. If it comes back undelivered, you untick it and fix the address. useOptimistic is that tick: shown right away, replaced by the truth when the post office answers.

2. The Core Idea

📌 **Interview term: useOptimisti

The solution is hidden so you can try first

5 min read · 8 sections

Read the code

A like button that updates instantly and rolls back on failure

"use client";
import { useActionState, useOptimistic, startTransition } from "react";
import { like } from "./actions"; // (prev, formData) => Promise<{ count: number; error?: string }>

export function LikeButton({ postId, initial }: { postId: string; initial: number }) {
  const [state, likeAction, pending] = useActionState(like, { count: initial });
  const [shown, addOptimistic] = useOptimistic(state.count, (c: number) => c + 1);

  function onLike() {
    const fd = new FormData();
    fd.set("postId", postId);
    startTransition(() => {
      addOptimistic(null);
      likeAction(fd);
    });
  }

  return (
    <div>
      <button onClick={onLike} disabled={pending}>Like ({shown})</button>
      {state.error && <p role="alert">{state.error}</p>}
    </div>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.