Instant mutation feedback
A user submits a form or mutation and the UI should reflect the expected result immediately.
React 19+ · Hook
useOptimistic
useOptimistic lets a component display temporary optimistic state while an Action is pending. After the Action finishes or errors, React returns to the source value.
- Since
- React 19
How it works
useOptimistic creates temporary UI state for an in-progress Action. React displays the optimistic value during the Action, then uses the source value again after the Action finishes or fails.
Syntax
const [optimisticState, setOptimistic] = useOptimistic(value, reducer?)Parameters
| Name | Type | Description |
|---|---|---|
value | any | The value used when no Action is pending and after the optimistic Action is complete. |
reducer | (currentState, action) => nextState | Optional pure function receiving the current optimistic state and an action, returning the next optimistic state. |
Returns
An array containing optimisticState and set. optimisticState is the value or reducer-derived temporary state; set updates it inside an Action.
Key points
- Use it when the interface should show an expected result before background work finishes.
- The Hook returns a state value and a function for requesting an optimistic value.
- The first argument is the authoritative value displayed when no Action is pending.
- The first returned item is the state currently rendered by the component.
- The second returned item schedules the temporary state used during an Action.
- Calling the setter in an Action immediately re-renders the UI with the requested optimistic state.
Common mistakes
- Call the setter within an Action, such as the callback passed to startTransition; otherwise React warns and the optimistic rendering is only temporary.
- A reducer must be pure and derive the next optimistic state only from its arguments.
- Like other Hooks, call useOptimistic at component top level rather than inside conditions or loops.
Example: Optimistic like count
import { useOptimistic, startTransition } from "react";
export default function LikeButton({ count }) {
const [optimisticCount, setOptimisticCount] = useOptimistic(count);
function handleClick() {
startTransition(async () => {
setOptimisticCount(optimisticCount + 1);
await saveLike();
});
}
return <button onClick={handleClick}>{optimisticCount} likes</button>;
}
async function saveLike() {
await new Promise(resolve => setTimeout(resolve, 500));
}The count changes immediately during the Action and returns to the source value when the Action completes.
When to use it
Responsive controls
A network-backed control needs a temporary count, label, or status while its request is pending.
Optimistic list updates
A list item should appear or change immediately while the server operation completes.
Interview questions
QWhat does useOptimistic return?
useOptimistic returns exactly two values: the current optimistic state and a setter. Without a pending Action, the state equals the value argument; during an Action, it reflects the reducer result or the setter value.
Follow-up: How should a reducer be designed? Keep it pure, accept the current state and action, and return the next optimistic state without side effects.
QWhat are the arguments to useOptimistic?
The first argument is the fallback value shown when no Action is pending. The optional reducer describes how an optimistic update transforms current state in response to an action.
Follow-up: What happens after the Action completes? React goes back to rendering the value supplied as the first argument.
QHow do you apply an optimistic update safely?
The setter must run inside an Action, commonly inside startTransition. React then re-renders with the optimistic value while the asynchronous work is pending.
Follow-up: What if the setter runs outside an Action? React warns, and the optimistic state only renders briefly before the source value is used again.
Related
startTransitionuseActionStateuseTransitionActions