Optimistic UI in Remix
Вставка
- Опубліковано 13 чер 2024
- The useSubmit Hook just got an upgrade... let's use it to build some optimistic UI in Remix!
🔗 LINKS
Code diff: gist.github.com/samselikoff/1...
Save 40% on Build UI this week 👉 buildui.com/pricing
🕐 TIMESTAMPS
0:00 - Intro
0:45 - Removing the pending UI
1:46 - Accessing pending form data with useFetchers
6:30 - Adding optimistic data to the feed
8:16 - Immediately clearing the textarea
10:40 - Submitting the form on Enter
12:44 - Why useFetcher is wrong
14:48 - New API: useSubmit
19:03 - The problem: Race condition
20:10 - The refactor: Client-side UUIDs
29:02 - The solution: Filtering persisted records from the optimistic data
31:42 - Demo
34:15 - Final touch: Saving indicator
36:19 - Black Friday Deal! - Розваги
Great tutorial on Optimistic UI and fetchers, thanks.
High Quality content. Keep the remix coming.
Thanks for the lesson, Sam. Great content as usual.
Seriously one of the best learning videos I have seen. I really appreciate this.
Great video as usual, Sam!
Great video. Deep enough to understand how optimistic ui on Remix works... It would be nice if you could show how to handle errors on optimistic ui as well. Thanks.
I'd often get tripped up by the useFetcher API in Remix. This helped deepen my understanding.
thank you Sam!
Hi Sam - Yet another great video. Nothing less can be expected from this channel.. You always try to explain it very nicely and easy to understand. Thanks for doing it. Appreciate it. Also wanted to say here that all your demo UI looks really sleek and thought-after... how do you come up with these project ideas and nice clean UI.. perhaps a video on how to approach a project from concept to final would be good to get some insights please. Thank you
Thanks for the kind words! The best advice for getting better at the design side of UI is to practice + recreate well-designed interfaces. Build up your taste over time and focus on the details. Refactoring UI helped me a lot here! I also spend about an hour in the Remix course on redesigning the Work Journal covering some design best practices along the way: buildui.com/courses/ship-an-app-with-remix/mobile-redesign
Maybe I'll add some videos here on the topic if folks are interested!
Thank you kindly Sam
Remix is such an amazing framework kudos for the project
You are a beast sir
Hey, in your future videos, is it possible to show your keypresses on screen? Recently started learning vim motions and the way you navigate the text is beautiful. Maybe could get some tips from just watching you code.
yuppp🎉
A lot going on there. Remix = good.
Sam could you make a video about Why remix? I saw in some of your videos you use remix. Is it better than Next.js?
Good idea! Remix feels more stable to me at the moment, but I really like both frameworks. I'm really excited about Server Components + Server Actions in Next.js, but the current caching defaults feel complicated. Maybe I will make a video talking about it!
@@samselikoff thanks. That would be great because there is little information on Remix
Hi Sam, great video as usual. I have some quetions:
- How will you do optimistic UI when there is error? (like network error or 4xx error when POST)
- Instead of optimistic UI, what If I want to show a toast to inform the user, how will you do it? Currently I'm thinking of using the session but it seem too much for me.
Thanks in advanced.
I think I'll have to make a follow-up to show how to do error handling since plenty of folks are interested in it!
For the Toast I would use Radix Toast (or one of the other headless UI libraries), I actually just shared a code demo for one here: buildui.com/recipes/animated-toast. You'd need to call the showToast method whenever you want one to show up. Shouldn't need the session. In your example, when do you a toast to show up? After each item is saved, or after all pending items are saved?
@@samselikoff wow, thanks for your reply. In my example, I want to show the toast after each item is saved.
@@SinhNguyen-tz6us You're welcome! In that case you should be able to just call the `showToast()` method from the recipe I linked to after you call `submit()` on the form! You can also use a library like React Hot Toast if you don't need as much control over styling/position/animation.
@@samselikoff Thank you, again.
What happens if the server returns an error? Will the item stays in the list or will it be removed?
I think I'll make a quick follow-up to address it!
What's about redirect from action? Otherwise if you click back button you'll post again. And especially if no JS you should redirect to revalidate
How do you handle optimistic UI in case of a failure, say a network error?
Was thinking of making a follow-up if enough folks asked this - sounds like it might be worth it!
How to revert back if data failed to save in database?
Reassigning entries just kinda broke my mind. Of course you should be able to do it, the entries would be reassigned when the data from the backend comes anyway, but somehow the push to always use const made it unintuitive for me.
I think const is overused :) Local reassignment is extremely handy (and safe) in JS!
Are there any security concerns by letting the client side determine the id of the entries?
Nope, assuming your backend (1) has standard validation logic against creating records with duplicate IDs (uniqueness constraint on the database), and (2) doesn't expose any sensitive information based on the client knowing a record's ID (which is typically covered by auth logic in loaders/actions already, since exposing resource IDs is a common way to build web apps)!
The reason ID is needed in the video is because it is needed to render the edit link. If you make the edit link render conditionally, you don't need to ID in advance. The revalidation will take care of eventually producing the ID.
@@samselikoff Do you have any tips on how to handle if a collision in the ID were to ever happen?
@@gamehelp16with UUIDs this has a VERY slim case of happening were talking 2+ quintillion records for it to even have a chance of happening (according to Wikipedia)
remix vs next js what is diffrent
What's that vscode theme? Looks like a bit darker Dracula theme😯
Thx.
Yep, Dracula with a few tweaks to match slate-900 from Tailwind. Just threw it up in a gist: gist.github.com/samselikoff/7a79b5363f87b838b88025ba992835c5
@@samselikoff❤
Can you give us the code link, repo to this project!
Great video, but i still don't understand why people use let over const 😐
fewer characters to type :P
also overreacted.io/on-let-vs-const/
but really I could care less, I might switch to const soon just so it's not a distraction
Is this debate still a thing? It doesn't matter what you use as long as you're not using var.
please more next.js & framer motion
👍 what framer motion stuff do you want to see?
Serious question, is it tough for you to give tutorials for things that Ember could do 40 years ago? I'm digging Remix over Next for sure.
Haha there are def some places where Remix is still catching up but overall I'm liking working with lower-level tools these days
I have to say, I find doing optimistic UI in remix not that fun for more complex stuff than this. It feels like trying to shave down a square peg to fit in a round hole.