00:00:01 Right now, as soon as you type a single letter, a request is made.

00:00:07 Let me show you.

00:00:08 I'll type the letter A, and immediately, you get back the movies that match the letter A.

00:00:13 But let's be honest, that's not really what you wanted.

00:00:17 That's not the expected user behavior.

00:00:19 you don't want to get the movies for the letter A, you want to continue typing.

00:00:24 So you go ahead and type the letter V.

00:00:27 You are still not done.

00:00:28 You are about to type Avengers.

00:00:29 But hey, now you got the AV, the hunt, and so on.

00:00:33 Not only is this not good for you, the user, but it is terrible for our server because things can very quickly get overwhelming.

00:00:43 Every time that you type a letter, one character, one request.

00:00:47 And this can easily lead to an excessive number of API calls, killing your daily usage and increasing your bills.

00:00:55 This causes two problems.

00:00:57 The number one is API overload, which might exhaust the server resources.

00:01:02 And the second one is rate limiting.

00:01:04 The API might have the too many requests rule, which could automatically break the application or lead to throttling.

00:01:12 So let me teach you the solution.

00:01:14 It's called input debouncing.

00:01:17 As you can see, we can enter a couple of characters and they're being sent only once.

00:01:21 So one more time, one, two, three, four, one request.

00:01:25 Five, six, seven, eight, one request.

00:01:27 While in the regular way, we send one API for each number.

00:01:31 Debouncing is commonly used to address the issue that we just experienced.

00:01:35 This technique helps us delay the request until the user has stopped typing for a predefined amount of time, reducing the frequency of API calls.

00:01:45 So let me teach you how to implement debouncing using a pre-made use-debounce hook from the react-use package.

00:01:53 This hook will help us manage the delay for us.

00:01:57 As you can see, use-debounce debounces a function.

00:02:01 and we can simply get access to that code by installing a package.

00:02:04 And this is actually a great way for me to show you how you don't have to build everything inside of your React apps.

00:02:11 Just head over to npm, search for what you're looking for, and then simply install it by using the npm i command.

00:02:18 We installed Tailwind CSS in a similar way.

00:02:21 And now we can simply use it.

00:02:23 Let me show you how.

00:02:24 Right at the top, we can import, use debounce, coming from React use.

00:02:32 And then we can create a new use state field.

00:02:37 This time, we'll call it a debounced.

00:02:42 search term and set the bounce search term at the start equal to an empty string.

00:02:48 Then we'll simply call the use the bounce hook, pass a callback function to it and call the set the bounce search term with the search term that we have.

00:03:00 but we can pass a specific number of milliseconds for how long it should wait before actually changing that value in the state.

00:03:08 This is how this weird little hook works.

00:03:11 So instead of passing the real search term, which gets updated on every single keystroke, we can now pass over a debounced search term into this useEffect

00:03:21 dependency array and into the fetchMovies function.

00:03:24 The useDebounce hook will take care of the rest.

00:03:27 Basically, what it does is it debounces the search term to prevent making too many requests by waiting for the user to stop typing for 500 milliseconds,

00:03:37 which is half a second.

00:03:39 So check this out.

00:03:41 If I want to type something like Avengers, I can now continue typing and it'll not make a single request until I stop typing for half a second.

00:03:50 So if I stop, it made a request.

00:03:52 But it looks like I have a typo, so if I fix it, we're good.

00:03:56 Of course, using this hook is amazing, and I would even recommend installing additional packages like this to help your workflow.

00:04:03 But sometimes it's good to understand how these hooks work behind the scenes.

00:04:08 So learning how to implement one from scratch by yourself, not by using an external package, is excellent practice to learn how React works behind the scenes.

00:04:17 Does this make sense?

00:04:19 Many creators won't even dive into this at a beginner level, but I believe it's important to understand it right from the start.

00:04:27 It's not just about building something, but about building something that truly adds value.

00:04:33 So next time you're in an interview, don't just say, hey, I implemented search functionality.

00:04:39 Instead, explain that you built an optimized search solution that improves performance by debouncing the input field.

00:04:46 That level of detail will set you apart.

00:04:49 And yeah, I hate to repeat myself here, but I've been diving into similar concepts and many more advanced patterns that boost performance optimizations,

00:04:57 caching, SEO, and more in the upcoming React.js Pro course.

00:05:02 because it's all about that real world production level practices.

00:05:06 No fluff.

00:05:07 So if you haven't already, you know the deal.

00:05:09 Join the waitlist and I'll see you there.

00:05:12 But with that in mind, we are now ready to move to a part of this app that I'm super excited about.

00:05:18 And that is the trending section.

00:05:21 You know that famous Netflix trending section.

00:05:24 Well, I'll teach you how to do just that.

00:05:27 So let's do it in the next lesson.