Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Optimize the 'Search'
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
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, symbolObjects, 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.