React 19's useOptimistic: EVERYTHING you NEED to know

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.

👉 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

[pedromenezes]

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

[arvind]

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

[coherentpanda]

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.

[coinvest]

Very detailed explanation, thank you very much!

[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.

[matteo_gabriele]

Gotta love that Ttttsszzzustand pronunciation!

[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

[reichenwald-gmqd]

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 that we have to write just to get an optimistic update? Doesn't it seem a bit boilerplate-y?

[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

[denilsoncosta]

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.

[marroos]

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 :-)

[rayevomr]

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.

[psdd]

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

[asdqwe]

Getting seriously fatigued by new react features

[Olorin]

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
}

[kanakkholwal]

What are you using for terminal auto complete?

[yashsolanki]

When will the pronextjs course be available??

[mayanksharma]

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