Remix Single: Optimistic UI

Рет қаралды 28,875

2 жыл бұрын

Instead of adding pending states and busy indicators while we wait for the server to process a mutation, we already know what the UI will look like when its done. Skip the spinners with Optimistic UI!
Learn more at remix.run

Пікірлер: 41

@inderdeepsingh3863 2 жыл бұрын

You are an absolute legend in the world of React. Soooo looking forward to Remix....!!!!!

@michaeldebetaz 2 жыл бұрын

Thanks a lot Ryan for these awesome videos 👌 After diving into Remix and liking it very (very) much, I decided to use it to build a production app for one of my clients (fully authenticated, so a pretty good case for SSR). I really love the way you teach and I would love to see more in the future. Keep up the great work!

@kudorgyozo 8 күн бұрын

These videos are awesome. Thanks!

@Greybph 2 жыл бұрын

Very much looking forward to Error Boundary video and all upcoming 👍

@KentCDodds-vids 2 жыл бұрын

Grammerous 😆

@thmsrttg 2 жыл бұрын

Hello there.

@arjungoalset8442 2 жыл бұрын

Glad to be in your last advanced react live session today :) Your are my inspiration. Hope to be like you one day.

@youknowwho4994 Жыл бұрын

Man, You nailed it. Remix & React-Router is awesome. One day i will sponsor to these open source projects when i am wealthy enough.

@dani-mp 2 жыл бұрын

Thanks for the video, Remix looks awesome and I can't wait to build production code with it. Something in this video that still doesn't feel great to me is that we have to use a custom object for the action error management. If we do that, then we probably want to wrap all our action responses in an object with a status property, so we can switch over success and failure, and then unwrap the actual "payload". But if we want to really leverage the platform, we already have error management backed in in both http and JavaScript, so what do you think it's the best approach here? It could be error boundaries, but as you said, maybe that's not the best tool for the job either?

@NandoSangenetto 2 жыл бұрын

Amazing video.

@DEV_XO 2 жыл бұрын

Amazing! ❤

@chrisleyva 2 жыл бұрын

Love this video. Was the video recorded using Camo and your iPhone? Looks crisp!

@CathalMacDonnacha 2 жыл бұрын

Great video. Optimistic UI is ok when you have one or two fields, but I wouldn't fancy having to re-enter info into a long form submission that failed.

@willbannister7001 Жыл бұрын

This is awesome! Was wondering how to do this for my app

@eolculnamo2 2 жыл бұрын

This is really cool. What would you suggest in a scenario where the server gets hung up until the request times out -- or any scenario where failure takes a long time. Seems like the user might see the name they just deleted pop back up 30-45 seconds later :)

@nadico5740 Жыл бұрын

Or you need a redirect after submitting a form

@bryanltobing 2 жыл бұрын

really great explanation :). could you please share your vscode configuration and theme?

@AnhDung-of4wk 10 ай бұрын

i love your smiling bro

@nadico5740 Жыл бұрын

Hey Ryan, How would you go about combining optimistic ui and redirects, can you hook to the transition state in another route?

@F39Productions Жыл бұрын

What if a single form could have multiple in-flight requests at the same time if the value of any of the inputs is different? I feel like that would be the most elegant solution to avoid having to use useFetcher for optimistic add case you showed to not have to disable the Submit button while the previous add is still processing.

@stevebarakat6968 2 жыл бұрын

✨✨✨✨✨✨ ✨Thank You! ✨ ✨✨✨✨✨✨

@nil7444 2 жыл бұрын

Any plans on sharing the repo or code?

@tshddx 2 жыл бұрын

15:36 How can I have multiple additions pending at the same time? If the form is driven by a fetcher.Form, then once you submit it, you'll need to check that fetcher's submission.formData to render the optimistic person, so wouldn't you need a *new* fetcher to allow the form to be submitted again? It's not clear to me where this unbounded list of fetchers (many still submitting, and one new one to allow another submission) would live. I'm guessing useFetchers (note the plural) comes into play.

@Remix-Run 2 жыл бұрын

That gets a bit tricky, probably too much for a YT comment reply :P Short version, handle form submissions yourself, shove formData into an array of react state, use that array to render components that have their own fetcher. It's harder than it should be, we think there's some room for improvement in the useFetcher API to not require so much footwork on the app's part.

@bryce_cee 2 жыл бұрын

Anyone with an idea what font is being used in the VS Code.

@ibrahimmohammed3484 2 жыл бұрын

wowie

@brimafreeman2765 Жыл бұрын

Please can you make Single about akimating page transitions between routes ! Please! I'm using Framer Motion.

@nako0215 10 ай бұрын

Is a revalidate required for Optimistic as well?

@tinmancode 2 жыл бұрын

this optimistic ui would be cool but say there is a delete operation that for network and who knows what just becomes slow to tell us that the request failed but we removed the element optimistically then the user navigates to another page

@yarapolana 8 ай бұрын

you could do a cron job for this case and retry the request there if it fails

@fowerthing9324 2 жыл бұрын

Is it possible to share sample code ..?

@ahmedkhattak2937 7 ай бұрын

Whats the theme you are using here ?

@nested9301 11 ай бұрын

iwas doing in this in react when i'm fetching data from firebase , iwas doing both approches and ididn't now that there is a name for them until i discover remix lol

@PeterKellner99 Жыл бұрын

I don't now remix, but I'm wondering why for an optimistic UI you don't just make a quick copy of current state, update the state to the expected result, then on failure, reset to previous state. Seems like a lot less new code then all the extra stuff done in this video to handle the expected change. That is, no having to be concerned with specific data, just use the same logic as would be applied when a successful update happens.

@Daniel-vl8zm Жыл бұрын

I guess because why would you bother? This just adds more complexity, as you now have to manage a separate client state, and try and manually keep that in sync with the server. Just let remix handle it

@PeterKellner99 Жыл бұрын

@@Daniel-vl8zm This was a while ago, but I thought I remember seeing that in Remix there was a ton of code to handle the optimistic UI, whereas on the client in JavaScript, very little code. That was my only point and why I would bother. I'm a lazy dev and less is more.

@sagirorlich2042 Жыл бұрын

where can i find the sourcecode?

@its4zahoor 2 жыл бұрын

At 15:40 "this is getting disabled too": Did you forget to remove disabled={isAdding} from Add button after clearing the conditional label? Or was it meant to keep the pessimistic UI? Which means if last item is adding, the button will be disabled and the new item can't be added.