Remix Single: Optimistic UI

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

[@inderdeepsingh3863]

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

[@michaeldebetaz]

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!

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

[@Greybph]

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

[@kudorgyozo]

These videos are awesome. Thanks!

[@KentCDodds-vids]

Grammerous 😆

[@thmsrttg]

Hello there.

[@arjungoalset8442]

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

[@CathalMacDonnacha]

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.

[@tshddx]

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]

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.

[@dani-mp]

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?

[@willbannister7001]

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

[@kin1763]

legend

[@eolculnamo2]

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

[@chrisleyva]

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

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

[@bryanprimus]

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

[@AnhDung-of4wk]

i love your smiling bro

[@brimafreeman2765]

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

[@bryce_cee]

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

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

[@DEV_XO]

Amazing! ❤

[@its4zahoor]

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.

[@nil7444]

Any plans on sharing the repo or code?

[@nadico5740]

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

[@NandoSangenetto]

Amazing video.

[@Bhannat1234]

Is it possible to share sample code ..?

[@tinmancode]

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]

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

[@sagirorlich2042]

where can i find the sourcecode?

[@melodyclue]

Is a revalidate required for Optimistic as well?

[@nested9301]

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

[@ahmedkhattak2937]

Whats the theme you are using here ?

[@stevebarakat6968]

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

[@whramijg]

Why does anyone even bother with Next. Remix is incredible.

[@ibrahimmohammed3484]

wowie

[@jamanshah1108]

Wajid Abbas

[@devmnnu5334]

×

[@MaxTheFireCat]

how old are you?