Optimistic UI in Remix

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

% 347

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/1b7d18b0aad30145e2f2a8c899fdf5bc
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!

Развлечения

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

21 ноя 2023

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

High Quality content. Keep the remix coming.

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

Thanks for the lesson, Sam. Great content as usual.

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

Great tutorial on Optimistic UI and fetchers, thanks.

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

Seriously one of the best learning videos I have seen. I really appreciate this.

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

Great video as usual, Sam!

@adiadiadi 5 месяцев назад

I'd often get tripped up by the useFetcher API in Remix. This helped deepen my understanding. thank you Sam!

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

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.

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

Remix is such an amazing framework kudos for the project

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

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

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

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!

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

Thank you kindly Sam

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

You are a beast sir

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

The useFetcher singleton approach has its applications. E.g.: When clicking a like button, you don't want it to send all the requests, you want just the last input.

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

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.

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

yuppp🎉

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

A lot going on there. Remix = good.

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

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.

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

I think const is overused :) Local reassignment is extremely handy (and safe) in JS!

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

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?

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

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!

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

@@samselikoff thanks. That would be great because there is little information on Remix

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

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

@SinhNguyen-tz6us 7 месяцев назад

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.

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

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?

@SinhNguyen-tz6us 7 месяцев назад

@@samselikoff wow, thanks for your reply. In my example, I want to show the toast after each item is saved.

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

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

@SinhNguyen-tz6us 7 месяцев назад

@@samselikoff Thank you, again.

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

What happens if the server returns an error? Will the item stays in the list or will it be removed?

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

I think I'll make a quick follow-up to address it!

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

Are there any security concerns by letting the client side determine the id of the entries?

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

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

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

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.

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

@@samselikoff Do you have any tips on how to handle if a collision in the ID were to ever happen?

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

⁠@@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)

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

How do you handle optimistic UI in case of a failure, say a network error?

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

Was thinking of making a follow-up if enough folks asked this - sounds like it might be worth it!

@samiullahsheikh5015 Месяц назад

How to revert back if data failed to save in database?

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

What's that vscode theme? Looks like a bit darker Dracula theme😯 Thx.

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

Yep, Dracula with a few tweaks to match slate-900 from Tailwind. Just threw it up in a gist: gist.github.com/samselikoff/7a79b5363f87b838b88025ba992835c5

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

@@samselikoff❤

@udaym4204 3 месяца назад

remix vs next js what is diffrent

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

Great video, but i still don't understand why people use let over const 😐

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

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

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

Is this debate still a thing? It doesn't matter what you use as long as you're not using var.

@codewithnws3544 5 месяцев назад

Can you give us the code link, repo to this project!

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

please more next.js & framer motion

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

👍 what framer motion stuff do you want to see?

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

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.

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

Haha there are def some places where Remix is still catching up but overall I'm liking working with lower-level tools these days

@jon1867 5 месяцев назад

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.