useOptimistic for Optimistic UI in Next.js Server Actions (+ Revalidate)

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 Discord: all my courses have a private Discord where I actively participate

⏱️ Timestamps:
0:00 Optimistic UI example
0:42 Overview
2:01 useOptimistic hook
5:41 Revert / Undo (revalidatePath)

#webdevelopment #programming #coding

[vickykumargupta]

Topics like this should be brought to the attention, this was super helpful.
I would really appreciate if you regularly bring such topics which would optimize the UI and improve the experience.

One day, you'll reach the height of millions subscribers.
Good luck.

[loveboat]

"Future of UI", aka the past. This was a lot simpler and very standard before serverless and server components you know.

[dawid_dahl]

Will use this at work for sure. Mind blowingly cool! My clients will be happy.

[lukq]

In my opinion it is better to use React Query + actions. We can share logic on multiple pages and revalidation is easier.

[novailoveyou]

Awesome, man web development is going to get even more fun

[twisterrjl]

Thank you for making the docs in video format. I can't read and I can't see. I usually listen to code and instead of writing I sing it

[jonathangamble]

RevalidatePath will over fetch your database though

[Edgar-pulc]

But if submitting is success, component rerender twice, yes ? When changed hook, and api after seconds, sorry for my english :)

[jorden]

But in my case, I'm always generating the ID in the server, it won't work for such a case, it will make me to create the ID in the client, and that's something that I don't really a fan of. I believe that the server must have the responsibility to work on its own.
And if I will create a different ID than the one that in the DB and will try to do an action to that specific record, the server won't find it in the DB. Unless I will revalidate the data from the server everytime.

[ayoubahabchane]

Have you tried this on a toggle button ? Such as when the user marks a todo item as complete / incomplete. I'm having a tough time getting it to work properly; it would work fine when I toggle the first time, but if I click again before the re-validation, the optimistic update won't come through.
Your videos are a Godsend.

[pouyajabbarisani]

I'm trying to write test for useOptimistic using jest, but it says "TypeError: (0, is not a function" :(

[Shubham-ycnz]

How to use this when we have toggle scenario. My like works find but when I unlike It does the same delay? as I can only push the values and not remove it

[christianstamati]

how can I implement removeOptimisticTodo?