Current section: Expensive Calculations 33 exercises
Problem

Async Results

Loading exercise

Transcript

00:00 Okay, so we've got our worker all ready to go. So right now, the thing that we're trying to improve is the actual search experience. So if I record this and then I hit a single character and then stop, it's not going to look too bad because again, I forgot to throttle the CPU.

00:15 So we'll do this again. Click one character and then stop. And you'll see we've got just this really, really bad piece. So when you're finished with this step of the exercise, then you shouldn't have that problem. Even on a 6x slowdown, it should be quite fast because we're going to be running on a separate thread, which will be awesome.

00:34 Now, of course, on a low-end device, that separate thread will also be kind of slow, but it is going to be certainly faster. And the UI is going to be a lot more responsive. A couple of things to keep in mind, though.

00:47 Using WebWorker isn't always going to be faster necessarily because there's the cost that you pay to communicate over that async boundary. So serialization, deserialization. And then on top of that, you also need to worry about the fact that that code is still running somewhere

01:05 and you're running on that device. So that worker is going to have the same CPU limitations that the actual device does have. However, it is going to improve performance. Most often, it's going to improve performance. And it certainly is going to do so in this example.

01:20 So you can do the same thing once you're finished making all of this async, and it should be better. And the reason we have to make this async is because that communication over those two different threads is an asynchronous operation.

01:33 It's input-output sort of thing. And so that's why we have to refactor our code actually quite a bit so that we can support asynchrony rather than the synchronous call of search cities. We're going to be using suspense here. We're going to be using transitions where you can even add use spin delay to avoid a flash appending state.

01:51 And all of this, and of course, we'll want to show appending state in the event that it does take a while. You shouldn't ever actually see appending state because it should be pretty quick, but definitely possible. And so nicer to show the user something. So we're going to do all of those things in this exercise. It should be a lot of fun. See you there.