Debouncing vs Throttling: Master debouncing-throttling & differences between them | Complete Guide

hey guys welcome back to engineering my in today's video we will be diving into two crucial technique that is debouncing and throttling that is crucial in optimizing your JavaScript code either it will be in simple JavaScript HTML or it will be in V okay so we will be covering out all the differences between deing and throttling where we should use deing and where we should use throttling if you watch this video start to end you don't have to look for any other video on internet or interview preparation or the implementation of deving thrott Link or any confusions regarding that okay so let's quickly start up with the video Let's create a blank react app open a terminal on a folder where you want to create the react tab write the command npf create react app I'm naming it as deing throttl it will take some time in the meantime let's see the documentation you will get the link of this documentation in the description so let's see this question that is uh one of the important question in interview also so what is De deing in context of wave development right so deboning is basically to not call a function too often that will also cause the performance issue and if we are calling any apis then it will also result in a lot of unnecessary AP call so to manage this we will be using debouncing and you can go through the documentation and we will be directly seeing its implementation and while coding we will be getting an understanding like how it will be implemented and why it should be implemented and what's what it results right what is its final result how it will be decreasing the number of AP calls or number of function calls right okay so when it's done I will give that done let's drag and drop our folder to vs code let's let's type npm start it is a command to start the react app all right let's remove this piece of code like we do in every video remove this ab. CSS index. CSS and let's create one components folder let's create one file name it as debound type RFC let's import this to app.js in why is not inputting the. JS okay okay let me create the basic UI so that I can be more focused on debouncing let's create one H1 tag let's WR here debouncing debounce and let's create one input field this fer ad search let's create create one state to store the text like value of this input field provide the value to it as text and on change of this input field we will be updating our state right set text as e dot Target dot value on it so we have an input field and we can type here something let's create one function that will be executed on change of this input field like whenever the user types let's create one function that will be basically to down state like how we will be fishing up the data from an e-commerce website or if we have any social media app then we will be patching up the post or something like user search we will fetching up the related post or user like we see on LinkedIn and Facebook gole Instagram right let's see it in the real world example here why it is not flip cart let's search here something so whenever we type something it is searching the result switching the data and it is showing here right if I type here mobile it is again fetches the result and it is mapping here right so whenever we type here something it fetches a data based on that so basically we will be demonstrating a deving from this input field like how it is be used in a real world project okay let's see let's create one function and in that function just we will be consoling up like fch data or something let's make one F data let's accept some text so that we can also have an like how we can pass the parameters from parents to child and let's do it here like f data and we'll be passing it do target. value so let's first type here something like uh mobile so if I type here AMU so it is running this function for four times right so if we have an API code so it will be fed four times right so it results in unnecessary a call so we the result that will fix for the complete mobile word not for am or AMO so it will not be useful for the user also so it will results in unnecessary AP calls so we will be managing up this with the help of a debounce function that will accept a function and a delay and it will result another function uh that will be executing after the particular delay that we are passing to that function right okay let's see it let's make a function debounce right it will return return another fun and let's make one ra here use refi so this time R is to basically uh store the ID of that particular set time out let me show you let me write the first if timer Tim dot current has something then it will be clearing out this time out with the time ri. current so it will be storing the ID time ri. current and after clearing out this it will set the time R do current as set timer we will be passing up in call back here and with a delay and we'll be accepting our delay and call back here FM for function and delay you can write anything and we'll be running our function here and we'll passing all the arguments here okay so this particular function hold the concept of complete devs as it accepts a function and a delay and it runs the function with that particular delay with the help of a set timeout let me make one devost face data function and instead of pH data we will be running our Devol data let's refresh it type here test we can see this function is called for only one time right if we write here 1,000 millisecond that means 1 second so this function waits for the user to stop typing for 1 second after that particular time this fetch data function will run let me demonstrate you so we are typing here something we are not stopping for one second so it is not F now we as we stop for one second it fetches the data right that is executing this fetch data function this is how you can control the number of f calls when you know the use case from your producting you will get an understanding like how many how much time you want to stop or something so that you can fetch the data all right so this is what a devoun is this particular function holds the complete concept of deving let me go through this once again and then we will be starting up with it sortal and after that I'll be explaining like the use cases of deing and throtl okay so this particular state is to store the text of this input field and we are running fetch data we are not actually making an API call but we are consoling that that this fish data will be uh fetching one data from then API we are assuming this and for now we are consoling a result like f data F result for this particular text and we are passing our text here that is ultimately passed from this Dev face data all right so this Devon function is taking one function and a delay this function will be executed after this particular DeLay So we have made one time ra using use ra hook if that time ra has something then it will clear out this timeout and it will set a new timeout with this particular delay and we are using this here and we are making one debounced face data where we will be using this devoun and we'll be passing our face data and a delay and our Dev face data function is ready and we are passing out our text from here and this function is running up to this particular delay this is water deving it this is helpful in reducing the number of a calls unnecessary a calls and also it is helpful in uh like performance optimization as it reduces the number of function calls right let's make one component for throttle throttle doj let's comment out this Dev and let's import our throttling here okay we can see throttle here let me make the same basic UI so that I can explain the throttling in depth okay so we have made one H1 tag with throt astics and we have made one button F tick status so we are basically demonstrating a fishing of our tiet status that we booked on on any website so if there is an internet connectivity the user presses this button continuously and sees nothing in the result and this leads to the unnecessary API calls so we will be basically restricting this thing and this is helpful in other use cases also like resizing of the window like it is a continuous operations and we want to pause it for particular time and after that particular thing happens we will be executing of this function right I will be discussing up the differences between debouncing and throttling after we get an understanding of complete debounce and throttle okay let's make one function here let us for this text and here we will be accepting our T and let's call it as PNR and on click of this button we will be executing this function and let's write here something this will be the PNR right let's refresh this so we are clicking here 12 times and it run this function for 12 times right so we want to stri this function function as maybe there maybe some internet issues or something that's why it is taking much more time than usual so the user thinks that this is not working and he starts pressing up this button so this ultimately results in number of a calls that is not necessary right so basically we want to fch the data and we will be pausing up for particular time and after that we'll be again allowing the user to uh like make the fet request right so let's make one throttle function here and for more understanding let's make one state here for count and we will be showing up here on the UI so that you can get an understanding state of seeing here 17 maybe it is not in as it is still smaller text let's here zero and let me five as col taste all right let's do it as H3 and on click of this fish data we will be consoling this and we will be increasing our count okay as count plus one this will create one issue so this will create an issue so we'll be increasing up our count with count + one okay we can see the number of times we're clicking the count is increasing right so we want to restrip the user for particular time so let's make that throttle function Let Us store our throttle using our user let's make p r o t LED throttle and for the first time we will be keeping it as false so for the first time it is not throttled so whenever it is throttled we will be not executing our function but when our throttle function founds that this throttle variable has a false like this is not throttled so it will be executing our function right so let's write one condition so if not throtle do current then we will be making our throttle dot current as true and we will be running our function and we'll be passing all our arguments here and we're making one set timeout and here after that particular time we will be setting this total do current as false so what it does so for the first time this function runs it satisfies this condition and it comes here and we are meing this toled as true and we are running our function whatever delay we pass here with that particular time we will be setting up it as false and so when it is true it doesn't run this particular function that is Al Ely making one API call or running some of the heavy calculations all right so let's create our throttled F data function okay so it will be using throttled and we are passing our fish data here and we are passing 500 milliseconds and instead of fish data we will be adding throttle face data let's see it is running for 22 times right let me see how this performing this thing okay so it is not running as we made throttle do current so we are putting an key in this throttle with a true so we need to make this throttle as two and let refresh it so it made two API calls so at every 500 milliseconds it is running this particular function right so we made only four and if we can store our count variable we can see how many times we clicked right let me show you with that original that foral and we will be set original as original + one and let's duplicate test let's see if like how many times we are clicking originally and how many times it is making the AP calls so user clicking it for 15 times and the count will be four times that is it is making an API call for four times if you made here 1,000 it will reduce to two right wait we have clicked for 12 times and it fetches the data for the two time for this particular PNR right so this is what a throttling is like we will be restricting our operation for this particular time based on our use case we will be executing this function first or we can execute it after the delay right so if we put this here we will be executing this for particular function at the end right so after the 1 second it will be executing this particular function so for this use case we will be fetching our data and we'll be stopping this user to press this button and make another unnecessary okay let's see what is the difference between this two right let's see from this documentation also so this is general question when you should use debouncing versus throttling right this is what we are discussing so use debouncing when you want to delay execution of a function until a pause or ideal period occurs right use debouncing when you want to delay the execution of a function until a pause or ideal period occurs right and use thly when you want to ensure the function is executed at a regular interval regardless of how often an events occurs right like how often the event occur you want to run this function at that particular interval right and for throttling this is the case and for debouncing this is the case like we will be pausing for this particular interval and after that we will be fetching up this data right this is the two use cases where we want want to pause for some time then we will be using debouncing and where you want to execute the function at an regular interval of time regardless how often the event occur so this is what difference between debouncing and throttling right you can explain as it is in the interviews so this particular documentation has the complete detail about the throttling and debouncing and all the informations about it please go through it once and still you found any of the issues please comment down below and and don't forget to like And subscribe to the channel for such awesome contents bye-bye

Channel: Engineering Mind

Views: 169

Keywords: Debouncing, throttling, debounce, throttle, debouncing vs throlling, what is difference between debouncing and throttling, React, ReactJS, JavaScript, Web Development, Frontend Development, React Hooks, useState, Coding Interview, Tech Tutorial, Coding Tips, Programming, Developer, react, reactjs, react hooks, useEffect, useRef, real app, CodingTutorial, EngineeringMind, ReactHooks, React Tutorial, Learn React, React Components, UI Development, Responsive Design, Project, Software, Make Website

Id: nGR9EHJnFXc

Length: 22min 7sec (1327 seconds)

Published: Sat Jun 29 2024