New useOptimistic hook and React Query

[Ganbin]

After following the query.gg course and espcially the Optimistic-Update chapter, I was curious how we could use the new useOptimistic hook from React 19.

As I could not find anything, I put my hands in the dirt and tried to use it with React Query.

Short answer

It doesn't fit well with React Query

Long answer

I asked chatGPT to make a summary of my findings

In trying out the new useOptimistic hook from React 19 with React Query, I found a few limitations that make it difficult to combine the two effectively:

• Leveling Requirement: useOptimistic forces me to lift useQuery and useMutate to the same level, which becomes awkward if the query and mutation logic are in different components.
• Re-render Incompatibility: After calling the addOptimisticItem callback, a re-render seems to occur, restoring the initial state and canceling out the optimistic update. This undermines the intended behavior and makes it challenging to manage.
• Preference for React Query’s Cache Control: React Query’s cache control is more refined and keeps data management isolated, allowing me to control what the cache returns without these constraints. So, I find React Query’s approach to optimistic updates more suitable.

Alternative Approaches

I also tried grouping useQuery and useMutation in a single hook to keep related data manipulation in one place, but re-render issues still interrupted the optimistic updates. This confirms for me that React Query’s cache control is more effective and that useOptimistic seems better suited as an alternative rather than a complement.

I have first put some comment in discord but I thought it was good to add my finding in a discussion in case other might ask themself the same question.

Feel free to add any of your findings with useOptimistic hook and React Query.

[TkDodo]

Thanks for looking into this. Can you post a stackblitz reproduction with what you have so far?

[Ganbin]

Here is a simple project where you can play around. There are 2 lists, one fully with Tanstack Query and the other with useOptimisitc

Bolt Playground

Don't forget to install with npm i --force. I had hard time setting up the environment due to some issues when installing react 19 (especially the types). If you have the same issue you can try this

rm -rf node_modules package-lock.json
npm cache clean --force
npm install --force

To see the flashing effect you might want to CPU throttle in dev-tools in order to slow down the execution cycle.

P.S. I don't know why but I cannot make the StackBlitz version to work, that is why I shared with bolt
P.P.S : I have pushed the code in 1 repo : https://github.com/Ganbin/tanstack-react19-playground