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

Подписаться 131 тыс.

Просмотров 13 тыс.

50% 1

👉 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

Опубликовано:

27 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 21

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

@loveboat 4 месяца назад

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

@dawid_dahl 7 месяцев назад

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

@user-fs3xf7cq6d 24 дня назад

really good stuff ByteGrad!

@novailoveyou 10 месяцев назад

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

@collinsk8754 2 месяца назад

Great tutorial 👍👍!

@lsaavedr 9 дней назад

thanks!!!

@twisterrjl 10 дней назад

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

@hbela1000 6 месяцев назад

cool,thx.

@lukq90 29 дней назад

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

@christianstamati 7 месяцев назад

how can I implement removeOptimisticTodo?

@jonathangamble 7 месяцев назад

RevalidatePath will over fetch your database though

@pouyajabbarisani 9 месяцев назад

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

@jorden123 28 дней назад

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.

@Shubham-yc6nz 9 месяцев назад

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 9 месяцев назад

I did it anyways.