[React 19] Bug: optimisticState is updated with both new state and optimisticValue in 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
   resets optimisticState with new State in another render cycle.
2. As a result, both the new state and optimisticValue is rendered. Tried this in 20x slowdown

React.19.issue.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

[JorensM]

Does happen to me as well on the provided CodeSandbox. The change between the optimistic state back to the original state does indeed occur with 2 renders. I guess it should be just 1 render probably.

[JorensM]

the state gets updated but the optimistic state still has the pending data which only clears in the next render.

[Ajay-25]

Yes, This is happening for me as well
After receiving the actual results from the server and updating the messages in App component, the updateFn of useOptimistic runs again with the final updated state and optimisticValue ( which is now already part of the final state ), and returns the optimisticState with duplicate values ( one already part of the final state and one with sending:true ) for one render cycle,
but somehow ( Magically ) it renders with the correct state in the next render cycle ( Not sure how it identifies the duplicate value )

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

Another similar sandbox - https://codesandbox.io/p/sandbox/react-19-useoptimistic-3f7htj?file=%2Fsrc%2FApp.js%3A52%2C5&workspaceId=ws_PszjWaELh3PS49RV1rnLom