React 19's useOptimistic: EVERYTHING you NEED to know
Вставка
- Опубліковано 30 чер 2024
- useOptimistic makes your pokey backend feel fast with optimistic updates to your UI. It's simple to use, but we'll covert the gotcha, as well as how to use it with React Query and also whether or not you should use it with a state manager.
Code: github.com/jherr/useOptimisti...
👉 Upcoming NextJS course: pronextjs.dev
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
00:00 Introduction
00:50 Creating a simple API server
03:05 Setting up Pico CSS
04:40 Connecting to the API server
05:43 Posting todos to the server
06:54 Bring on useOptimistic with 19
09:04 When to call the useOptimistic setter
10:10 useOptimistic with a transition
11:10 Potential issues with useTransition
11:56 Reducer variant of useOptimistic
12:48 Error handling
14:25 Using a form action
16:00 useActionState
17:28 Integrating with React Query
18:02 Don’t fear the peer deps warning
19:48 Using React Query’s useMutation
21:32 Once more, but with Zustand
24:09 State manager or useOptimistic
24:29 Outroduction - Наука та технологія
As always, pretty insightful video with clear explanations and examples! Thanks for covering as much as possible in such a concise video!
Keep going Jack, really useful to see RC updates like this. 👍
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.
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.
Fantastic presentation and content as usual, love these.
Very detailed explanation, thank you very much!
Amazing video as usual ❤️
Gotta love that Ttttsszzzustand pronunciation!
cheers from Chile Jack!!
Thanks for the useful video!
As always insightful vedio
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
Great video thanks Jack, one question though how you are doing the syntax highlights when you are explaining and rest of the code fade
I do that manually in Screenflow as I'm assembling the video.
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?
Thanks, I'm also not convinced this is enhancing the readability. Just more hooks to hide the obvious.
@@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.
I would be cool to show the all the extensions like console ninja you’re using
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.
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.
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.
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 :-)
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.
Looks like a little bit complicated/over engineered to implement a simple optimistic UI in a todo app
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.
Thats why we use RQ in production. Code is simpler and more maintainable.
It is mate, all the demos always show a simple scenario but in real web apps it's absolute chaos with this hook
That’s missing the point a bit
When will the pronextjs course be available??
It's in final priduction right now. So it's actually out of my hands.
@@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.😂
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
}
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.
@@jherrnop false read the docs again
@@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
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.
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.
When your pronextjs getting released
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
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.
@@jherr Oh I see, I thought I was crazy lol. I hope you do more of these series. Also thank you for your reply
Could you cover nuxt and react remix/router in the future?
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.
Can anyone let me know the theme?
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.
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.
You’d need to store the original state somewhere to roll back on error. The useOptimistic hook gives you the rollback for free.
@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?
@@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.
Apollo client
Yep,, Apollo was the first time I ever used optimistic response. About time it became a standard in React.
wtf is the difference between addTodo() vs addNewTodo()?
They're not very optimistic if we'll use this implementation
Getting seriously fatigued by new react features
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
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.
Ew, what a mess these APIs are. Remix does all of this so much cleaner.
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.
Tired of React