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.
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.
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
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.
I know it's 7 months after this comment, but it would probably look something like this: const [optimisticTodos, removeOptimisticTodo] = useOptimistic( todos, (state, todoId: string) => state.filter((todo) => todo.id !== todoId) ); and you would pass todo's ID to the function if you want to have both add and remove with one hook, you would have to implement your own reducer, or... just use useState() and either filter out the todo you want to remove or append the one you want to add in the setter
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.
"Future of UI", aka the past. This was a lot simpler and very standard before serverless and server components you know.
Will use this at work for sure. Mind blowingly cool! My clients will be happy.
You use unstable experimental canary features at work?
@@codiumyt I have a high enough degree of certainty this is going to be implemented, so it is fine!
Awesome, man web development is going to get even more fun
Great tutorial 👍👍!
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.
But if submitting is success,component rerender twice, yes ? When changed hook, and api after seconds, sorry for my english :)
I'm trying to write test for useOptimistic using jest, but it says "TypeError: (0 , react_1.experimental_useOptimistic) is not a function" :(
RevalidatePath will over fetch your database though
In my opinion it is better to use React Query + actions. We can share logic on multiple pages and revalidation is easier.
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
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
I did it anyways.
@@Shubham-yc6nz how did u do it?
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.
how can I implement removeOptimisticTodo?
I know it's 7 months after this comment, but it would probably look something like this:
const [optimisticTodos, removeOptimisticTodo] = useOptimistic(
todos,
(state, todoId: string) => state.filter((todo) => todo.id !== todoId)
);
and you would pass todo's ID to the function
if you want to have both add and remove with one hook, you would have to implement your own reducer, or... just use useState() and either filter out the todo you want to remove or append the one you want to add in the setter
@@danielk6333 Thanks!
nextjs hook?
thanks!!!
How do you opt into this?
Just create a new project with npx create-next-app@latest
cool,thx.
nb