Build a Live Search Box with useBroadcaster and useListener in React

Fixing Bugs in Our Live Search Box

Create an ifElse Operator to Fork on a Condition

Merge Multiple useListener Hooks in React

Compare useBroadcaster and useListener to the Standard React Hooks

Remember to Check for Done

Save Network Requests by Using a Cache

Fix Race Conditions Due to Caching and Canceling

Building Live Search Box

Caches exist to make things faster (at the expense of taking up more memory and possibly outdated results). Our live search is a great use case for implementing a cache, so let's set up a `mapBroadcasterCache` operator which can map a string to the result of a broadcaster.

https://app.egghead.io/api/v1/lessons/react-save-network-requests-by-using-a-cache/subtitles

Instructor: [0:00] On the topic of making too many network requests, let's explore some ideas for caching. When we talk about caching, we're talking about mapping a key -- in our case, it could be this URL -- to the result of this data, which is this result here.

[0:15] All of that happens inside of this map broadcaster. Let's copy that in. I'm going to grab from operators -- look for mapBroadcaster. I'm going to copy this and bring it over, back into my index file, paste it right here. I'm going to name this one mapBroadcasterCache and name this mapBroadcasterCache as well.

[0:41] What we're going to do is set up a cache in here, so call this cache, and create a new map. The way this is currently set up, we have access to the key, but we don't have access to the resulting value. I need to create a new listener in here. We'll say newValue and then listener with that new value. This is the same as before.

[1:07] Before that happens, I can use my cache to set the value that comes through to the newValue. This would be the URL and this would be the response from getURL. Let's go ahead and check that out. I'll console log out a cache, then in my console, I'll type in STAR. You can see we have a map with one value that has mapped the URL to that response.

[1:34] We just have to prevent this from being called if the cache already has this newValue. I can go ahead and check here, if cache has value, then we can invoke the listener with cache.getValue. We just return because we just want to skip all of this. We don't even want to create this new broadcaster.

[1:58] I'll hit Save here, I'll type in STAR, you'll see it does our network request right here and it sets the cache. I'm going to delete one character and then type R again. You'll see it did not do anything here. The network did not make another request.

[2:20] If I come in and type an S, it will make another request. You can see that in the network, it searched for stars. My console, it added to my map. I have two keys in there now. If I delete one, the results change back to the cached result. If I type in the S again, it changes to the cached version of that stars key.

[2:44] Looking into our Network tab, you'll see there's only two requests, the first one for star, the second one for stars. No matter how many times I delete the S or add the S, it doesn't make a new request until I type something new like star site. In the console, you'll see the new request.

Save Network Requests by Using a Cache

Share this video with your friends

Course

Building Live Search Box