useOptimistic with useTransition

[00:00:00]
>> Brian Holt: So let's refactor to use optimistic, we're also gonna use transition again. So at the top here, we're going to import use optimistic, and we're going to say, useTransition, okay? We're going to do a up here. The top we're gonna say const isPending and startTransition again.
>> Brian Holt: Because useTransition.

[00:00:36]
And then underneath this one we're gonna say, const (optimisticThoughts, and addOptimisticThought are going to be equal to useOptimistic. And then the first thing is we're gonna give it thoughts cuz that's the one that it's going to populate itself off of. Then we're gonna give it an update function.

[00:01:05]
So we're gonna say oldThoughts, newThought.
>> Brian Holt: Okay, and then I'm gonna say, new Thought,...oldThoughts.
>> Brian Holt: You could even do something like, I have this in reverse order. Anyway, we'll talk about that in a second. Okay, so now I have this optimisticThoughts array, which is basically just going to be thoughts most of the time, except when I call this addOptimistic thought, these two are gonna differ a little bit.

[00:01:39]
And then once they're reconciled, then they'll be the same thing again. So inside of postDeepThought.
>> Brian Holt: We're gonna come down here to setThoughts.
>> Brian Holt: So I'm gonna say down here, startTransition. You might be wondering, it's like, do I have to put this in a transition? And I believe the answer is yes, cuz you have to mark this as being like a low priority re-render.

[00:02:13]
And so this all just works inside of transitions.
>> Brian Holt: I have this entire thing marked as one. Is that really what I wanna do? Yeah, I mean, I guess let's just follow my notes here. So I think you could actually just mark it at the end, but we're just gonna do the whole thing inside of a transition.

[00:02:43]
>> Brian Holt: To make sure this is async it is, that's totally fine. Cool, that all sounds good. And then inside of this,
>> Brian Holt: Yeah, we're gonna do up here as well, very first thing we're gonna say addOptimisticThought. You could just put directly the thought in there but I'm gonna do this, dollar sign this, and I'm gonna say thought and then I'm just gonna put a loading here.

[00:03:19]
>> Brian Holt: So then the user knows this hasn't really been sent. I'm showing you that it's been sent, but it actually hasn't been sent yet. And then once this actually setThoughts, newThoughts gets called down here, this will implicitly drop this, right? Because whatever comes back from the API is going to include just the normal value, okay?

[00:03:39]
So close here. The last thing that we need to do here is instead of mapping over thoughts, we're gonna map over optimisticThoughts.
>> Brian Holt: So now what do we expect? I'm gonna type in here some real deep thoughts. I'm gonna call this and the notice that shows the right away, which is really cool, and it shows this loading indicator as well.

[00:04:04]
And then once it actually hits the API, it's gonna say some real deep thoughts, right? So it actually drops the loading, this feels snappy, right? This feels really good, I don't know, it feels good to me. Let's for funsies, I'm gonna turn this up to 90% error rate.

[00:04:22]
So you see what it looks like when you don't do it.
>> Brian Holt: So if I say lol here, this thought was not deep enough do better. It just drops it, right? Because it sees like this nothing actually got added to this. And so once that's transition ends and nothing's been added to it, it's just gonna go back to the original state.

[00:04:45]
So I don't have to write any additional machinery. It just goes back to the original state that we started at the beginning of the transition.
>> Brian Holt: Cool, right? Any deep thoughts?
>> Brian Holt: Some of these other ones were pretty funny. People say no JS is not blocking, but I found it blocks me from having meaningful relationships with anyone who doesn't know what a callback is, [LAUGH].

[00:05:16]
It's just true, hurts a little. Sometimes I stay awake at night wondering if I'm manipulating the DOM or if the DOM is manipulating me. Some really good deep thoughts here. Cool, any questions about optimism, just in general? Are you optimistic? I don't know if I am. This does prove the point that this has to be wrapped in a transition or it doesn't work.

[00:05:50]
You can see that it's getting mad at me for not having this wrapped in one. So if we add back the transition here, which we should.
>> Brian Holt: And now I'm going to add a bunch here, and you'll notice that it has some kinda strange behavior that now it's duplicating them and re-adding them back, and eventually it'll reconcile to be correct.

[00:06:19]
The real issue here is that we're not deduplicating up here. We could add some more logic in here that we wouldn't add these optimistic values at the same time that the optimistic value exists in there, particularly when there's multiple here and here merging. So these don't have IDs, and I'm not gonna code this on the fly, but that's where you would add the logic.

[00:06:42]
Is just making sure that you're being judicious about where you're adding optimistic values.
>> Speaker 2: Do you have any thoughts or deep thoughts on how to handle errors with user optimistic? Or what's the flow for handling errors?
>> Brian Holt: Yeah, I mean, we saw it a little bit. Let's just momentarily turn this back up to like 0.9 here.

[00:07:04]
>> Speaker 3: [COUGH]
>> Brian Holt: So I mean, you can see here that I did just the lazy thing and showed an alert. So obviously never use alert Like that. It's just the biggest user anti-pattern. It's like user hostile, obviously. So I like the way that iMessage does it, where it still shows you kinda optimistic value.

[00:07:29]
But it just has a big red exclamation point on it that says, you tried to send this, do you wanna try and send it again, right? Because it didn't succeed. So in a messaging app, or something like here, we could just show a red exclamation point there and say, I do wanna send this, it is deep enough, believe me, right?

[00:07:49]
And then you would try and resend it. But it's a UI design problem and not necessarily a React problem, right?