useOptimistic for Optimistic UI in Next.js Server Actions (+ Revalidate)
Рет қаралды 12,458
Күн бұрын👉 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
@user-fs3xf7cq6d 11 күн бұрын
really good stuff ByteGrad!
@vickykumargupta605 9 ай бұрын
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 6 ай бұрын
Will use this at work for sure. Mind blowingly cool! My clients will be happy.
@novailoveyou 10 ай бұрын
Awesome, man web development is going to get even more fun
@lukq90 16 күн бұрын
In my opinion it is better to use React Query + actions. We can share logic on multiple pages and revalidation is easier.
@collinsk8754 Ай бұрын
Great tutorial 👍👍!
@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.
@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" :(
@Edgar-pu1lc 8 ай бұрын
But if submitting is success,component rerender twice, yes ? When changed hook, and api after seconds, sorry for my english :)
@hbela1000 6 ай бұрын
cool,thx.
@christianstamati 7 ай бұрын
how can I implement removeOptimisticTodo?
@jorden123 15 күн бұрын
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 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?
@jonathangamble 6 ай бұрын
RevalidatePath will over fetch your database though
@Balance-8 10 ай бұрын
How do you opt into this?
@ByteGrad 10 ай бұрын
Just create a new project with npx create-next-app@latest