React 19's useOptimistic: EVERYTHING you NEED to know

[@pedromenezes7175]

As always, pretty insightful video with clear explanations and examples! Thanks for covering as much as possible in such a concise video!

[@MagnusRG]

Not sure if you saw it, @jherr, but formAction from useActionState does get the formData object as the second argument. So you do not have to create it yourself from the ref.

[@arvind6151]

Keep going Jack, really useful to see RC updates like this. 👍

[@coherentpanda7115]

Awesome explanation. I loved optimistic response in Apollo Graphql, so I'm glad to see React saw the value of giving this feature as well.

[@ballingt]

Fantastic presentation and content as usual, love these.

[@coinvest0]

Very detailed explanation, thank you very much!

[@fadfooood]

Amazing video as usual ❤️

[@IINoirII]

17:05 - why was formData null?

[@columkelly99]

My understanding is that this hook is to help you avoid having to use state in a parent component so that it can be server rendered. In your examples you can call setTodos({ ...todos, newTodo }) in place of the optimistic setter and have the same functionality, you can add setTodos(todos) in the catch block to handle the reversion if something throws.

[@nazarocean]

Thanks for the useful video!

[@matteo_gabriele]

Gotta love that Ttttsszzzustand pronunciation!

[@kartikkaushik4743]

As always insightful vedio

[@jamesharper5850]

One of the problems Im having with useTransition() with useOptimistic() is that once the transition ends, the optimisitc state briefly reverts back to the original state before the newly set data (from the db) can pass to my component and update The flow 0. use clicks like 1. startTransition wraps the rest of the function: 2. optimistically update 3. update the db 4. fetch the updated data from db 5. set the data // Function ends and here's the problem 6. transition ends 7. optimistic state reverts back to pre clicked state // --------------------------------------------- 8. newly set data from db cascades down the tree and renders, showing the new correct value

[@lev1ato]

has anyone found a solution to this?

[@jamesharper5850]

@ I still haven’t found a solution. Hoping to spend some time on finding one over the next few weeks

[@moggedau]

Is there a way to optimistically perform more than one CRUD action? I ran into this problem where i had managed state but need to add / remove etc optimistically but the logic was honestly getting out of control compared to using something like use swr or zustand for state management.

[@jherr]

Sure, in this model you can do as much work in the action as you want, and set as many optimistic values as you want. The nice thing is that you get the automatic rollback when things fail.

[@flippo_]

Great vid as always! Correct me if I'm wrong but I believe with form action the input field should clear it self so you don't need that ref.current.value = ""? Tried to recreating it and it worked on my end at least, also I think the reason why the app "blew up" after you introduced useActionState was because the current action payload is the second argument not the first

[@camilo5821]

cheers from Chile Jack!!

[@marroos5440]

Hello, i am still learning and i've checked useActionState from latest version of NextJs and it looks like improved useFormState to me, so i would like to use it for pending/error states when i use server action (let's say addTodo). Why should i use useOptimistic hook too? I mean when i press Button in form with server action in useActionState i can add loading/ spinner status while isPending is active and/or error text once error occurs. If everything goes well, new todo is added to list and displayed. I am getting confused with all those new hooks and changes, so i would like to know what is the point of useOptimistic in scenario i've described. Does useOptimistic work like placeholder for data showing: once it is successful, data stays, and if not, they disappear? Ty :-)

[@jherr]

Yes, that's the way useOptimistic works as shown in the video. It looks like useOptimistic is a best match for smaller operations; A like/subscribe button, for example.

[@reichenwald-gm4qd]

I would be cool to show the all the extensions like console ninja you’re using

[@PhilipAlexanderHassialis]

Excellent video Jack as usual! What's your opinion on all the code tied with the useOptimistic/startTransition/useActionState/etc that we have to write just to get an optimistic update? Doesn't it seem a bit boilerplate-y?

[@derSeega]

Thanks, I'm also not convinced this is enhancing the readability. Just more hooks to hide the obvious.

[@coherentpanda7115]

@@derSeega If you build your own reusable components, I see a lot of value in this versus some state manager version of it. I think it is great React standardized some hooks that will be taken advantage of in various css frameworks.

[@kanakkholwal]

What are you using for terminal auto complete?

[@jherr]

Fig, which is now Amazon Q.

[@abodiit]

Great video thanks Jack, one question though how you are doing the syntax highlights when you are explaining and rest of the code fade

[@jherr]

I do that manually in Screenflow as I'm assembling the video.

[@denilsoncosta9837]

i used it in a app where has the car functionality and the UX become better when the user increment or decrement the quantity of a product.

[@Olorin5800]

The reason it works even if your passing an async function to use transition is because the code up until the first await is still going to be run sync, only when you hit the first async call is when the event loops does something else, its working by mistake. Also if my understanding of the docs is correct u got the whole concept wrong the use optimistic data is not available for the duration of the transition use optimistic uses the original state as the source of truth meaning that its basically something like this (overly simplified) function useOptimistic(value) { [state, setState] = useState(value); useEffect(() => { setState(value); }, [value]); // rest of function for optimistic updates and return values }

[@jherr]

They've updated the docs and clarified that transitions can wrap async functions and the transition terminates at the resolve of the async function. To your second point, I don't understand what the value of useOptimistic would be if the data is available only during a transition or action, but is also not available during that time. And clearly, demonstrably, the behavior is as demonstrated in the video.

[@Olorin5800]

@@jherrnop false read the docs again

[@Olorin5800]

@@jherrits extremely simple use optimistic state is a superset of the actual state whenever u set the actual state optimistic state yields and uses that, transitions are a different thing saying hey this needs to be rendered at the first async point so the user gets feedback immediately, the observed behavior is okay ur understanding of it seems wrong to me

[@jherr]

It only returns the optimistic state during an action or transition. "useOptimistic is a React Hook that lets you show a different state while an async action is underway. It accepts some state as an argument and returns a copy of that state that can be different during the duration of an async action such as a network request." This is the reason why I demonstrated it the way I did. If you set the optimistic value outside, then outside of the context of an action or transition, you get the original state. Only during the action do you get the optimistic state. They actually even put a warning into the console about setting the optimistic state outside of an action or transition. Again, as shown in the video.

[@jherr]

FWIW, I used to think it was a reference based implementation. That the state reference changing would void the optimistic state. But that's not the case. It's reliant on the action or transition status.

[@rayyanalam4815]

Can anyone let me know the theme?

[@MagnusRG]

It is not entirely clear to me why we can't just set state optimistically via a normal state variable prior to calling the Server Action, and then setting that same state to the return value of the Server Action after it finishes. Seems easier to just set newTodoState twice, before and after the Server Action call, than to pass the newTodoState into the useOptimistic and rely in that to turn thr temporary state on/off.

[@jherr]

You’d need to store the original state somewhere to roll back on error. The useOptimistic hook gives you the rollback for free.

[@MagnusRG]

@jherr Thanks for the reply. If we add the newTodoState to todos state by merging it in (instead of overwriting the entire todos state), then if the Server Action returns an error we just remove newTodoState from the todos state. I guess that should work without needing another temp state?

[@jherr]

@@MagnusRG In this case that's true. But if the state change is more complex, where fields are being updated and we've no longer retained the individual value, then you'd need a full backup of the original record. The value of useOptimistic is that it tracks both the original value and the new value, and that it rolls back automatically on a failure.

[@akrishnadevotee]

Could you cover nuxt and react remix/router in the future?

[@jherr]

Kind of an odd combo. What would you like me to cover about Nuxt and Remix? Also, FWIW, Remix is, as much as they hate to say it, based on React, so useOptimistic will be available with React-Router 7.

[@yashsolanki069]

When will the pronextjs course be available??

[@jherr]

It's in final priduction right now. So it's actually out of my hands.

[@yashsolanki069]

@@jherr awesome!! Looking forward to it. I hope pricing is considered with PPP. Otherwise i would have to rob a bank here in india to get this purchase done.😂

[@ps14dd88]

Looks like a little bit complicated/over engineered to implement a simple optimistic UI in a todo app

[@PhilipAlexanderHassialis]

My thoughts exactly. It's not that it doesn't work per se, but try to imagine this for a complicated form state and not a single value. Imagine a form with multiple fields, and even worse, imagine a form where some fields depend on other fields and the "detail" fields need to fetch new values depending on the "master" fields. A chaos all in all.

[@porroapp]

Thats why we use RQ in production. Code is simpler and more maintainable.

[@moggedau]

It is mate, all the demos always show a simple scenario but in real web apps it's absolute chaos with this hook

[@dave6012]

That’s missing the point a bit

[@bandekhoda7801]

Hello. I can swear on my life that you had a video where you ranked different Next js UI component libraries and although I watched it fully, I can't find it for the life of me. Can you give me the link or the title? Thank you

[@jherr]

I took it down. One of the sections where I said that a UI framework was incompatible with the App Router was inaccurate, and it was unfair of me to create a problem for them to have to dispel any misinformation.

[@bandekhoda7801]

@@jherr Oh I see, I thought I was crazy lol. I hope you do more of these series. Also thank you for your reply

[@asdqwe4427]

Getting seriously fatigued by new react features

[@gerkim62]

wtf is the difference between addTodo() vs addNewTodo()?

[@sushantjadhav1475]

When your pronextjs getting released

[@mzimmma]

remember when optimistic functions used to be anti-user friendly. Now it's the time to be optimistic lier in your frontend till your backend requests return if they don't fail.

[@sufiblade]

They're not very optimistic if we'll use this implementation

[@derSeega]

Okay, I'm not a big fan of this I think. I'm not feeling like this is enhancing the readability of the code to be honest. Updating the state manually and afterwards overriding it with the response is not adding more code than the useOptimistic, but everyone will understand what is happening. And I was hopeing we can have less hooks in react 19 not more 😒😒 Maybe some one can convince me

[@coherentpanda7115]

You have to think of it from their perspective that React is now just a library, and package and framework developers take these base hooks or components to build UI frameworks and other useful packages. It may not be the most readable code, but it is powerful stuff for those who will use it under the hood for reusable component packages.

[@usmansbk]

Apollo client

[@coherentpanda7115]

Yep,, Apollo was the first time I ever used optimistic response. About time it became a standard in React.

[@keepforever726]

Ew, what a mess these APIs are. Remix does all of this so much cleaner.

[@jherr]

I looked it up and Remix's "support" for optimistic UI is just a coding pattern you can lift (www.learnremix.io/learn-remix/optimistic-ui-with-remix#handling-errors-with-remix-and-optimistic-ui) that is kind-of supported by the Form. But there example at the end has a very jank likeCount - 1 setting of the useState if it fails... I don't see how that's better. Also, Remix (or React-Router) is built on top of React, so you'll get this hook either way with React-Router 7. Which will also give you server actions.

[@hikarukun5126]

Tired of React