Optimistic UI Updates

[00:00:00]
>> Brian Holt: Okay, so we are gonna do our next one here, which is in starter, and we're gonna do optimistic. So, cd optimistic. Do a nice MPM install in there, and I'm gonna open that in my code editor.
>> Brian Holt: So, I want you to, picture your text messaging app of choice.

[00:00:25]
That could be WhatsApp, iMessage signal, ICQ, aim, MSN Messenger, steam messages, GameSpy messages anyone use those? No, I think I was the only one anyway, whenever you send a message, right? So, you say like hello to whoever you're sending it to, you immediately get shown hello as a text bubble right there, right?

[00:00:47]
Despite the fact that it actually hasn't really sent yet, right? So, you type hello, you hit enter, and it shows that you have sent it, but it hasn't hit the wire yet. It definitely hasn't been delivered yet. That's called like an optimistic UI updates, right? That you're showing the users that you did an action, and I have like, I'm optimistic that this is going to work.

[00:01:09]
So, I'm going to show you as if it has already worked, despite the fact that it hasn't yet worked. So, if you were doing this in a non-optimistic way, you would say type hello, and then you just wouldn't show anything there, and until it actually got delivered, and then you would pop up the hello bubble, right?

[00:01:25]
That would be a non-optimistic idea. In this particular case, that would cause some dissonance with the user, because in their brain, I typed hello, I hit enter. To them, it's sent, right? It's gone, they done their action in the interaction kind of model here, it's sent to them, right?

[00:01:48]
The behavior model. And so frequently the behavior model and how you engineer things are similar. But in this particular case, there's kind of a drift between how you're gonna build something, and what the user thinks about what you're building. And so, we should always try and error on the side of users to try and make it make sense.

[00:02:07]
So that is the point of optimistic UI updates. So again, just to kind of harp on that. If we go back to our course notes here and we look at optimistic values, you type your message, you click Send, and then the message shows up in the log of messages, and this is the one that we're interested.

[00:02:27]
Then the message is actually sent over the network, and the recipient receives it. So, they kind of have that at least an I iMessage, because, as you can see, them on a Mac, and so it follows that I have an iPhone as well. It'll show sent and then it'll show delivered afterwards.

[00:02:45]
So, you get some sort of like post, like this has definitely been delivered to the end user there. So, I'll show you how to do all of those things with this hook here called use optimistic. So like transitions, everything I'm showing you here could be done without these specialized hooks.

[00:03:08]
But because we have this React scheduler and reconciler that we got, I call it new, but it's probably like seven or eight years old at this point. We can kind of just take advantage of the fact that this is already doing a bunch of scheduling for us, and so we can just kind of lean into that with these hooks.

[00:03:25]
It was a pain before, but it was possible.