React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Like in section [04 Implement the Pattern in Common Async Scenarios](https://egghead.io/playlists/implement-the-pattern-in-common-async-scenarios-c059), it's time to implement the pattern in common scenarios!

Now that you're familiar with the pattern we'll build a search box that handles a few different async scenarios.

You'll filter values based on user input, debounce text while a user is typing, and send a request once they are finished. Finally, we'll see how to implement a cache to save on network requests

**You're in Section 07 of [Composing Closures and Callbacks in JavaScript](https://egghead.io/playlists/composing-closures-and-callbacks-in-javascript-1223)**

We're currently using `mapBroadcaster` to map the text of the input to a message sequence, but we can replace our message sequence with any other broadcaster we'd like. Let's try mapping to our `getUrl` broadcaster to create a "live search" functionality where we keep our debounced text input and map it to the fetch request

javascript

Build a Live Search Box with useBroadcaster and useListener in React

When building out asynchronous scenarios, it's really important to make sure they're behaving exactly the way you want. Checking the number of network requests, event handlers, and timing of everything will help you track down bugs.

Fixing Bugs in Our Live Search Box

So far, we've used `filter` to prevent values when a condition is met. Sometimes you want two different behaviors based on a condition which is where you would naturally reach for an `if` and an `else`. Let's take a look at what an `ifElse` operator would look like in the context of our live search box.

Create an ifElse Operator to Fork on a Condition

Rather than thinking in an operator that handles multiple conditions, you have more control when you think of splitting a single broadcaster into multiple broadcasters with different behaviors then merging them back together. This lesson walks through setting a two broadcasters on the same input text (one for fetching data and the other for "clearing" results).

Merge Multiple useListener Hooks in React

It's important to remember that everything we've made can be created in React using their standard library. This lesson highlights the differences between the patterns we're following and the standard React way to show how beneficial patterns can be to take care of complex nested logic.

Compare useBroadcaster and useListener to the Standard React Hooks

It's easy to forget to account for "done" when you're not working with sequences or any sort of completion. But it's important to remember that all timers have an end which will push out a "done" value so any operator using a timer will need to handle the "done" case.

Remember to Check for Done

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.

Save Network Requests by Using a Cache

Caching will often grab cached values faster than an "in flight" asynchronous value, so you may end up receiving your values out of order. We've also naively set up a scenario where we cache Errors. This lesson walks through handling errors and cancelation when caching is involved.

## Congrats on finishing Section 07: Building Light Search Box!🎉🎉

  👉  **[CLICK HERE to continue to the next section, Implementing a Word Game with Patterns and React.](https://egghead.io/playlists/implementing-a-word-game-with-patterns-and-react-dcb0)** 👈 

Building Live Search Box

John Lindquist

Course Content