Debounce input field in React using useEffect setTimeout

so today we will be creating the bounds like in GitHub hope when I type code space so this this has nine letters right but only four API calls have made so we'll be doing in react so when I type bat Karma it should not be available that Karma so only one API call has been made right even when I type something like slowly so only four APA calls have been made so the letters are greater than 4. okay so we'll be seeing how to do this in react using use effect okay I have just created a react app so we got some Json data instead of making an API call we'll check the username from these uh these Json data so we got some CSS so first in our app.js we'll have a label label HTML for you name will have and the label will be change username will have an input of type text right and the ID will be ID will be you name right we'll also have a p tab for our message and when we save this you should see the output right so first we'll have two states one for the user input State another for the message state right so const user name set username use State initially this will be an empty string and same for the message as well message set message right we have not imported the state okay so now we have to make this a controlled input so to make that we will create a function on change function for the input on change input so this function will set the username set username e dot Target Dot value right so after this username is set will will feed the username back to the input so value equals to username and this on change function we've placed it in our input on change equals to on change input error should be gone right so now after we make the sentence make this a controlled input for debouncing if we use the use effect use effect so the first argument is a callback function and the second argument is a dependency array right inside our use effect we'll have a const for a timer so set timeout so this receives two argument first is the Callback and second is the delay so 500 milliseconds right so inside this timer we'll make the fetch API call since we are not doing it we'll import the Json data and check okay so import ant data from dot slash Json data okay so inside our timer we'll check if data dot sum PL I'll explain the sum method equals to user name then what you want to do is set message to user name dot obvious level else reset message to user name available right so what this sum method does is it Loops over the array so it will Loop over this Json data and it will Loop until this condition is met so if the condition is met for this this element it will terminate on this element it will not run the loop for these elements right so when the condition is met it will return true okay so it returns a Boolean value and we have to we also have to clear our timeout so inside our user effect return function so clear timeout so inside our user effect return callback we clear the timeout and we pass the timer okay so here in our dependency when we when do we want this user effect to run whenever this value changes right whenever username changes inside the input field we want this use effect to run okay we also have to set this in the message inside our jsx okay we'll put a console log to see the debounce okay so DOT log fetch call right so now this should be working so whenever I change so I have written a lot of letters here but only two fetch API calls have made right so like this username is available right now but when I type something so when I type Bad Karma right it should not be available okay back Karma username available I think I've done ah we have not returned okay don't so this runs no matter what okay that's why it's no it was not updating so when I now when I enter so this username is available like hdfs this username is available because no one has taken in our database but when I type Bad Karma it should not be available because it's already taken by other user right so only five API calls have made but eight letters are here okay if we comment the set timeout we don't use the D bounds without the debounds when I type so for each letter an API call is made but when I use the d-bounds right so when I use the d-bones now when I clear the console now when I type Bad Karma only one apical is made says the result okay so this is why it bounce is helpful it it helps apps performance so it can be it can also be used inside a search bar so I was looking for debouncing in react documentation so I found this so here they have introduced a new hook use default value debouncing and throttling are for optimization but use default value is for optimizing rendering right so by default it will know if it's a fast device or a slow device so if the if the device is fast then it will be fast if the device is slow then it will optimize according to the device right so they are saying that D bounce demons and throttling are a blocking so whenever debounce happens so react will prioritize the debones and stop the rendering process I got reminded of the react icons site so whenever we type this so notice how this stops spinning right they have I think they have implemented d-bounds that's right so we'll use this hook in some other video when I have to learn and explain so when the input field is empty we don't want any message right to achieve it we can just add a condition if e dot Target dot value is an empty string then we set the message as an empty string and inside our use effect if username is an empty string then we return so this code will not execute when username is empty string right and now when we reload we don't see the message when the input is empty right okay that's all guys thank you for watching

Channel: Novel Code

Views: 2,047

Keywords: json, array, some method, any method, javascript, some, debouncing, input, field, react js, api, calls, search, improve performance, useeffect, hook, settimeout, controlled component, onchange, username, cleartimeout, state, usestate, validation, github, performance, usedeferredvalue, new hook, react 18, app.js, debounce, render, blocking debouncing, react, js, code, web, dev, developer, front, end, fullstack, react code, programming, 100 days of code, coding video, novel code, repository, available, badkarma, change, new

Id: nqFGNKd6bWo

Length: 10min 11sec (611 seconds)

Published: Sun Dec 18 2022