[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

[ezine189]

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

[mcmillion]

Anyone find a workaround for this yet? I've been beating my head against this for hours.

It looks like useOptimistic is essentially unusable in its current state (unless you want broken renders or duplicate entries)?

[mcmillion]

What I ended up doing on my end to get around this for now:

Luckily, everything we're using this for is CRUD-related operations, and we're using nanoid in the frontend to assign IDs for things, so we can use the ID as an identifier. With that, I'm just filtering duplicate IDs out of the optimistic items. The double updates happen close enough where this doesn't really change the "optimistic" feel of the updates, but prevents flash of double items or React complaining about duplicate keys.