In React 19, what are the two arguments to useOptimistic, what does it return, and at what moment does the optimistic value stop being rendered?

## The signature ```jsx const [optimisticState, addOptimistic] = useOptimistic(state, updateFn); ``` - **`state`** — the real, confirmed value. Usually props, or state from another hook. `useOptimistic` never owns it. - **`updateFn(currentState, optimisticValue)`** — a pure function that merges an optimistic value into the current state and returns the result. It has the same shape as a reducer. - **`optimisticState`** — what you render. Equal to `state` when nothing is pending; equal to the merged result while an action is in flight. - **`addOptimistic(value)`** — call it with whatever you want merged in. React passes it to `updateFn` as the second argument. ```jsx const [optimisticMessages, addOptimisticMessage] = useOptimistic( messages, (current, newText) => [...current, { text: newText, sending: true }] ); ``` ## The three moments **Before.** No action running, so `optimisticState === state`. The hook is inert. **During.** Inside an action you call `addOptimistic(value)`. React re-renders immediately with `updateFn(state, value)` — no await, no server. If you call it several times before the action settles, React folds each value through `updateFn` in turn, so the results accumulate rather than replacing each other. **After.** The moment the action settles — resolved *or* rejected — React discards the optimistic layer entirely and renders the `state` argument as it is then. This is the sentence to say in an interview, because it explains both the happy and unhappy path with one mechanism: - The action succeeded and the confirmed state now contains the item ⇒ the optimistic row is replaced by the real row, and the user sees no flicker. - The action failed, or succeeded but the confirmed state was never updated ⇒ the optimistic row simply vanishes. That is the "rollback", and you wrote no code for it. A consequence people miss: the optimistic value is dropped whether or not the request succeeded. If the server accepted the write but your real state never picked up the new value, the UI still reverts and looks like a failure. The optimistic layer is a temporary overlay, never a place to store results. ## Where addOptimistic may be called It must run inside an action or a transition — typically the first line of a form action, before the `await`: ```jsx async function send(formData) { const text = formData.get('text'); addOptimisticMessage(text); // instant, still inside the action await api.send(text); // the pending window } <form action={send}> <input name="text" /> <button type="submit">Send</button> </form> ``` Called outside that window there is no pending action for React to tie the optimistic value to, so it has nothing to revert at and React warns about it. The rule follows from the mechanism: the optimistic layer exists exactly for the duration of an action. ## Why updateFn must be pure React may call it more than once, and calls it during rendering. Mutating `current` instead of returning a new value, pushing into an array in place, or issuing a side effect inside it will produce wrong or duplicated UI. Treat it exactly as you would a reducer: derive and return, never mutate. ```jsx // Wrong: mutates the confirmed state array. (current, text) => { current.push({ text }); return current; } // Right: returns a new array. (current, text) => [...current, { text, sending: true }] ``` ## Marking the provisional item Because the optimistic entry is indistinguishable from a confirmed one unless you say so, `updateFn` is where you add the marker — a `sending: true` flag, a temporary id, a reduced opacity. Rendering that marker is what turns "instant but a lie" into "instant and honest". ## What it is not `useOptimistic` is not a cache and not a state manager. It holds no value between actions, it cannot be read outside the component that called it, and it does not retry anything. It is a render-time overlay whose entire lifetime is one action. Anything you need after the action settles has to live in the real state you passed in as the first argument.