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

Рет қаралды 12,550

Күн бұрын

👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Optimistic UI in Next.js is now possible!
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 Optimistic UI example
0:42 Overview
2:01 useOptimistic hook
5:41 Revert / Undo (revalidatePath)
#webdevelopment #programming #coding

Пікірлер: 20

@user-fs3xf7cq6d 14 күн бұрын

really good stuff ByteGrad!

@vickykumargupta605 10 ай бұрын

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.

@dawid_dahl 6 ай бұрын

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

@loveboat 4 ай бұрын

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

@novailoveyou 10 ай бұрын

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

@collinsk8754 2 ай бұрын

Great tutorial 👍👍!

@hbela1000 6 ай бұрын

cool,thx.

@lukq90 19 күн бұрын

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

@ayoubahabchane 10 ай бұрын

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.

@Edgar-pu1lc 9 ай бұрын

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

@jonathangamble 7 ай бұрын

RevalidatePath will over fetch your database though

@pouyajabbarisani 8 ай бұрын

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

@jorden123 18 күн бұрын

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.

@christianstamati 7 ай бұрын

how can I implement removeOptimisticTodo?

@Shubham-yc6nz 8 ай бұрын

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

@Shubham-yc6nz 8 ай бұрын

I did it anyways.

@N8X4TE 8 ай бұрын

@@Shubham-yc6nz how did u do it?