React Debounce Search Input API Call | useDebounce React Hook

[@DaveGrayTeachesCode]

In this tutorial, you will learn how to debounce an input that automatically searches the Wikipedia API. Bonus: you will have a working React search engine app! 💯 If you have questions, join my Discord server and share your questions there: discord.gg/neKghyefqh

[@oortcloud210]

Clear, concise, no silly 'Game Changer!' clickbait titles - thank you! I always look for tutorials by you first if I need sound advice on how to do something well.

[@DaveGrayTeachesCode]

Glad I could help!

[@PolycarpOkock]

We have been using lodash debounce functionality for this, glad to see. Sometimes we used also the throttle just to delay the results

[@DaveGrayTeachesCode]

Glad this may help!

[@quasi_verum]

true this shoul be called useDelay, not useDebounce, because in _.debounce the function still being called when the timeout is reached, so if in case we type more than 100 char the function is still being called several time. this good when you use searching suggestion, but bad in calling api, useDelay should be better in using API.

[@khalilbenmeziane8836]

I learned a lot from you, thank you dave

[@DaveGrayTeachesCode]

You're welcome!

[@jitxhere]

You are a gem Dave. Thank you for making these wonderful practical tutorials and projects.

[@DaveGrayTeachesCode]

You are very welcome!

[@harag9]

Great tutorial, Many thanks for this. I'm currently implementing a similar feature at work and couldn't work it out to only run after x time. Though I could if it was plain javascript back in the day - React mindset is quite different.

[@nextleveltech267]

Thank you, it was usefull❤❤❤❤

[@7doors847]

Very nice Dave!!👌

[@DaveGrayTeachesCode]

Thank you! Cheers!

[@dr-Jonas-Birch]

Great series. JB

[@zombiefacesupreme]

LMAO, I literally figured this out by myself the other day, but it's good to see that my code ended up very similar to yours!

[@DaveGrayTeachesCode]

Nice work!

[@parvan7716]

Thank you so much for this tutorial😍😍😍😍😍😍

[@adityakunwar1524]

was waiting for this video for a long time

[@DaveGrayTeachesCode]

I'm glad you waited and I hope it helps!

[@s3interdev]

Thank you Dave, very helpful.

[@DaveGrayTeachesCode]

Very welcome!

[@azadsarxanli]

You're just Amazing, Dave! Thanks a lot.

[@DaveGrayTeachesCode]

You're welcome!

[@ankitaburman5406]

This was so smooth .. Thank you Dave .

[@DaveGrayTeachesCode]

You're welcome!

[@romimaximus]

I really wish you could, ..i mean if you can of course, .. do a tutorial about "unit tests" in a React app, and deploy using "Github actions - CI/CD"... in AWS, or any other cloud service you prefer.... I'm sure it will help lots of Devs out there, ...and also because these days, thats very important requirement that companies are looking for... And again thank you very much for always share great content..

[@DaveGrayTeachesCode]

Thank you for the request!

[@PrashantSingh-ug6tv]

Hi Dave, please also make a video on the multiple checkbox filter option as did for search and add to this playlist

[@sakibcoder]

very clean intructions💯

[@DaveGrayTeachesCode]

Glad it helped!

[@TravinskiyVladislav]

Thank you, Dave

[@DaveGrayTeachesCode]

You're welcome!

[@konstantechang2779]

Hello dave What is the extension you using to highlight code block scope area

[@hungnguyencanh5089]

Thanks, Dave

[@DaveGrayTeachesCode]

Welcome!

[@prakharagarwal3530]

Great 💯 I learned a neat technique to apply Role based Authorization from your authentication and authorisation playlist. thankyou 😊

[@DaveGrayTeachesCode]

Glad it was helpful!

[@gyglejid]

Hi! I noticed that the List component is re-rendered every time the value in the search field is changed. However, the request goes away after the last change of the List component - is this a feature of useSwr? Will this not work with fetch? Am I right? Thx for video and your work!

[@youssefkarfouh3084]

thank you so much dave

[@sojocjohny]

Hi, can you do a video about making a component for image cropping, resizing and converting them to base64 or File or Blob as per requirement in react typescript... That would be helpful.

[@DaveGrayTeachesCode]

Great suggestion! While not in React, I did do some of that in my TinyPNG clone with Vanilla JS: kzbin.info/www/bejne/oHbNoGyLrtmjf8U

[@baconovertures1675]

Thanks Dave!

[@aziskgarion378]

That's a crisp font, what font is it I wonder.

[@rounakmukherjee9540]

Thank you very much this is something that i am also looking for

[@DaveGrayTeachesCode]

Glad I could help!

[@The.mohisa]

thanke you that's really helpful

[@hardwired66]

Thank you sir for the tutorial, Need tutorial for react js testing unit / testing tutorial

[@DaveGrayTeachesCode]

You're welcome!

[@imam_robani]

Cool ! I think you forgot to explain the console.log process

[@DaveGrayTeachesCode]

I left it in there so you could see how it works - but I did not go back to show it. For every letter you type, you will see the timeout is cleared - until you stop typing and then you will allow the final timeout to complete :)

[@big-jo89]

can we just use the de-bounce as a helper function, is there any benefits from using a hook rather than just a normal function

[@DaveGrayTeachesCode]

That's essentially what the hook delivers. You could really ask that question about any hook that provides a function. That said, if you will use other hooks to create your function, you need to create a hook following the rules of React. We could go down a rabbit hole asking if we really need any of React's features or rules at all because it is just Javascript - but when using React, I try to do things in a React-ful way.

[@kakhabervk9405]

I first of all thank for these videos. Today I searched maybe here is react-hook-form it meet me on one project and I think this hook is iteresting not nonly for me. sorry my not so english spelling.

[@lebronjaimeslannister]

Hi Dave, after watched the previous debounce tutorial I tried to use that vanilla way in a Next.js project, turns out it worked fine, am I missing any potential problem? or creating the custom hook for debounce is generally better for a react app. Thank you!

[@DaveGrayTeachesCode]

A custom hook is the React-ful way to go.

[@lebronjaimeslannister]

@@DaveGrayTeachesCode Thank you very much! I'll practice more to *think in react*!

[@studybelief]

Hi Dave, I'm wondering if I should use the debounce function written in vanilla JS for the setValue. Does it matter? `function debounce(fn, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeout(() => { fn(...args); }, delay); }; }`

[@DaveGrayTeachesCode]

Debouncing a search input is a good idea. There is also a React-ful way to do it.

[@studybelief]

@@DaveGrayTeachesCode Thank you sir 😊

[@jaymonserrat5982]

You kind of look and sound like Aberama Gold from Peaky Blinders. Very cool 😂

[@DaveGrayTeachesCode]

I have not watched this - but now I want to 😀

[@karthikam6395]

Thanks!

[@DaveGrayTeachesCode]

You're welcome and thank you for the support! 🙏💯

[@Web-Himansu]

sir can I start WebDevelopment skill with MDN Documentation or any programming language Documentation.

[@DaveGrayTeachesCode]

I think MDN provides the best HTML, CSS, and JavaScript documentation. It can be a little technical at times but it is detailed. w3Schools.com might provide easier to read documentation when starting out - but MDN is the source of truth.

[@Web-Himansu]

@@DaveGrayTeachesCode your advice and directions for me . I never forget 💕 💕 💕 💕 💕 💕 💕 💕 you and your guide to path that i want in my life and my goals. God always with you sir. I never forget "STRIVING FOR PROGRESS, NOT PERFECTION".

[@Web-Himansu]

@@DaveGrayTeachesCode sir how much time to learn javascript from MDN.

[@DazzyDude00]

How would you use this without SWR? I tried using axios, useFetch, and there seems to be limitation to WikiPedia API, search value is required and on initial load the input is empty and the error shows up: 'The "gsrsearch" parameter must be set.'

[@DaveGrayTeachesCode]

No issue with the Wikipedia API. You can prevent sending a request until you have input - and debounce can be applied to any type of input and request - not just SWR. Here is a Vanilla JS tutorial I have on debounce: kzbin.info/www/bejne/r3OpeaqAnNZ_epY You can apply this to fetch, axios, and anything else you use to send requests.

[@michaelscofield2469]

content idea: infinity scroll but not down, to top like whatsapp like slack, when we scroll top fetch the data and show

[@DaveGrayTeachesCode]

I'll have to check that out in Slack. Thanks for the request!

[@michaelscofield2469]

@@DaveGrayTeachesCode to view old messages

[@belkocik]

React Debounce Search Input with react query next? :D

[@DaveGrayTeachesCode]

Maybe not next, but I could do that sometime. Debounce would work the same. The only difference would be how to apply it in RQ vs SWR.

[@Abdullab_Niaz-ri1sc]

Sir, please recommend me MERN Stack master level course

[@Abdullab_Niaz-ri1sc]

I wanting to become a Mern stack

[@DaveGrayTeachesCode]

Have you completed my MERN course? kzbin.info/www/bejne/eaemmoGbgdONZpI

[@dainsleif3122]

whats with all the else if's ? friendly tip. don't use else if's its very difficult to read. this would be better if(seomething) => return 'something' if(something_else) => return something else ]

[@Victor-wh9bs]

Great explanation

[@DaveGrayTeachesCode]

Glad it was helpful!