Optimistic Add

Learn how to leverage useSubmit and useFetchers to handle the complex use case of optimistically updating multiple forms without a single useState or useEffect.

00:00 - Overview
02:14 - Before optimistic UI
04:16 - Using useSubmit
06:47 - Update data with pending items
09:45 - Get pending items with useFetchers
15:54 - Add pending items to data
17:50 - Demoing optimistic UI
18:26 - Auto scroll with flushSync
21:15 - Review

[rev]

I love the idea of these videos. Great examples, so much wonderful energy from Ryan too. this guy knows his stuff

[seanyohara]

I like the user defined type guard on the filter method... very useful!

[EugeneChoi-et]

Great content. Optimistic update is our recent ambition at work too.
I do have one question though, at 15:47, I believe id should be null before the server responds to the post request (unless we are assigning the card's id on the client side?), and therefore should not be able to match 1-to-1 correctly with the incoming responses, especially if the response comes back in a different order. But in the video it looks like its magically matched correctly. I'm very curious how this was handled.

[skelet]

Great content Ryan. Love these short series.
Could you elaborate on why you keep the "preventDefault" in the Form after the refactor? Couldn't you add the id as a hidden input?

Furthermore, it would be really nice if you could share how you would recommend making some tests for these flows.

[gjhhjy]

Lovely stuff, thank you, Can you briefly cover what to do if a request fails? I probably won't want to bother fine-grained errors tbh, but it'd be good to signal "hey something failed on this page, maybe reload before you type much more"

[crazier]

I'm new. What happen when we have error? Do we need to handle it or Remix had us covered already?

[sudhakars]

Great content as always, Thanks Ryan!.
Have one query, Generally frontend won't have id field while creating an entry so how do we handle optimistic update especially the case where we check if item is already present or not to avoid race conditions. Thanks again!

[yooujiin]

hey, I recently started frontend development, more into backend. I'm competent at html/tailwindCSS but dived straight into remix while also learning Javascript and react.

can I get help on the best step toward? I'll like to focus on the backend while using remix to quickly build frontend projects

[bustamantedev]

Great stuff. What is the recommended UX approach when the request fails for some reason? How do you handle error scenarios with this approach?

[petergombos]

I find it amusing that we're celebrating the ability to implement optimistic UI with Remix, a feature Trello did a decade ago! 😄

[akamfoad]

I’m not the only one who picked up the subtle subtext at 6:48 am I?

Great stuff btw, I love the optimistic updates🤌