
Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var
(function-scoped, outdated)let
(block-scoped, modern and recommended)const
(block-scoped, cannot be reassigned)_
, or $
let let = 5;
is invalid)myVar
and myvar
are different)string
, number
, boolean
, null
, undefined
, bigint
, symbol
Objects
, Arrays
, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
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.