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

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.

John Lindquist: [0:00] With this filter placed here, when I type STAR it will search, and I delete a character, it doesn't search, but it also does nothing once I clear it out. I would like to be able to remove all the results once I type less than four characters.

[0:17] You might think instead of doing a filter that we could do something like an if...else, where this would be a condition, and if this was true, it would do this stuff, and if it was false, it would just do an empty array to clear out all the results.

[0:31] Let's try that and see what it looks like. When I cut all of this, I'm going to put it inside of a pipe. This can be the if branch. The next argument down here can be the else branch, and else can be map to an empty array.

[0:46] If I format this, you'll see the error as we haven't defined if...else yet, but this is what using it would look like, so a condition, the operator that we get on if and the operator that we get on else.

[1:00] An if...else operator would take those three arguments, a condition, an if operator, and an else operator. Then of course, a broadcaster, and a listener. We can put all these pieces together. Our broadcaster would go ahead and take the value.

[1:20] Then we can check if the condition on the value, then do our if branch here, and do our else branch here. You see the remaining pieces are if, else, and the listener. Because if operator is an operator, it's an operator that wraps around a broadcaster, and then takes the listener. The else would be an operator, else operator, takes a broadcaster, and then wraps around the listener.

[1:51] The question is, what do I put as our broadcaster for this, since this broadcaster is already feeding into this listener? The answer here is we can just pass in a function that takes the listener and then invokes the listener with the captured value from here. You'll see we'll pass the value into this listener. I'm just going to call this innerListener, and this will be innerListener.

[2:18] The idea is we still need to pass the listener down, so it can get wrapped around with all of the other operators down the chain. That listener comes in through here. The value that it wants is just this. This is an odd broadcaster to write, because it takes a listener and then just invokes it with this value.

[2:36] Let's extract this. We'll call it immediateBroadcaster. It's necessary in this scenario where we needed to fire immediately and to only do that once.

[2:49] We can take this and put it in both of these. Now when I hit Save here, I type STAR, you'll see it'll do the search just fine, but if I delete a character, you'll see it will clear out the search results by passing an empty array.

Course

Building Live Search Box

Create an ifElse Operator to Fork on a Condition

Share this video with your friends