Bug: Both optimisticValue and new state is displayed together using useOptimistic

[vedanttikku12]

Using the react Example given for useOptimistic hook in docs, an update in state passed to the hook should directly reset the optimisticState in one render.
Instead

1. It calls the updaterFn first, updates the optimisticState using new state and optimisticValue during one render cycle
2. resets optimisticState with new State in another render cycle.

As a result, both the new state and optimisticValue is rendered. Tried this in 20x slowdown

Screen.Recording.2024-12-31.at.1.30.15.PM.mov

React version: 19

Steps To Reproduce

1. Throttle CPU to 20x slowdown
2. Type some input in text box and press submit
3. See that the optimistic state is displayed and then it is pushed down for an instant along with the new state
4. Check console logs

Link to code example:

https://codesandbox.io/p/sandbox/react-dev-forked-gmlxnr?file=%2Fsrc%2FApp.js&workspaceId=ws_QiCvK4c476hege6EDsXfpC

The current behavior

When new state is passed to useOptimistic,

1. It updates optimisticState by calling updaterFn with new state and optimisticValue
2. Component is rendered using this optimisticState (incorrect one)
3. Another update to optimisticState is done by resetting it to the new state
4. Component is rendered using this new optimisticState (correct one)

The expected behavior

When new state is passed to useOptimistic, it should directly reset the optimisticState without calling the updater Fn

[vedanttikku12]

#31944 Added this same issue here with React-19 label. Closing this as duplicate