Optimistic UI in Remix

The useSubmit Hook just got an upgrade... let's use it to build some optimistic UI in Remix!

🔗 LINKS

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

[martinemanuel]

Remix is such an amazing framework kudos for the project

[adiadiadi]

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

[Gileno]

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.

[laptopuser]

High Quality content. Keep the remix coming.

[planetmall]

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

[saurabhprakash]

Great tutorial on Optimistic UI and fetchers, thanks.

[VitorJustin]

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

[vaibhavshringarpure]

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

[simonpoudyal]

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.

[anthni]

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.

[amirnoorani]

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?

[muhammadbinjamil]

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

[gamehelp]

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

[SinhNguyen-tzus]

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.

[samiullahsheikh]

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

[volumepunch]

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

[DivjotSingh]

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.

[shadowfaxenator]

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

[predaytor]

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

[codewithnws]

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