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
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.
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.
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.
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!
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..
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.
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.
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 :)
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); }; }`
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!
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.
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.
@@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".
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.'
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: ua-cam.com/video/yBFHwJgqLD4/v-deo.html You can apply this to fetch, axios, and anything else you use to send requests.
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 ]
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
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.
Glad I could help!
I learned a lot from you, thank you dave
You're welcome!
We have been using lodash debounce functionality for this, glad to see. Sometimes we used also the throttle just to delay the results
Glad this may help!
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.
You are a gem Dave. Thank you for making these wonderful practical tutorials and projects.
You are very welcome!
You're just Amazing, Dave! Thanks a lot.
You're welcome!
Thank you, it was usefull❤❤❤❤
Very nice Dave!!👌
Thank you! Cheers!
Thank you, Dave
You're welcome!
Thank you Dave, very helpful.
Very welcome!
Thanks, Dave
Welcome!
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.
was waiting for this video for a long time
I'm glad you waited and I hope it helps!
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!
Nice work!
Great 💯
I learned a neat technique to apply Role based Authorization from your authentication and authorisation playlist. thankyou 😊
Glad it was helpful!
Great series.
JB
This was so smooth .. Thank you Dave .
You're welcome!
Hi Dave, please also make a video on the multiple checkbox filter option as did for search and add to this playlist
Thank you very much this is something that i am also looking for
Glad I could help!
very clean intructions💯
Glad it helped!
Thank you sir for the tutorial, Need tutorial for react js testing unit / testing tutorial
You're welcome!
thank you so much dave
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!
Thanks Dave!
thanke you that's really helpful
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..
Thank you for the request!
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.
Great suggestion! While not in React, I did do some of that in my TinyPNG clone with Vanilla JS: ua-cam.com/video/jEjo9UytpIc/v-deo.html
Thanks!
You're welcome and thank you for the support! 🙏💯
That's a crisp font, what font is it I wonder.
Great explanation
Glad it was helpful!
You kind of look and sound like Aberama Gold from Peaky Blinders. Very cool 😂
I have not watched this - but now I want to 😀
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.
Cool !
I think you forgot to explain the console.log process
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 :)
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);
};
}`
Debouncing a search input is a good idea. There is also a React-ful way to do it.
@@DaveGrayTeachesCode Thank you sir 😊
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!
A custom hook is the React-ful way to go.
@@DaveGrayTeachesCode Thank you very much! I'll practice more to *think in react*!
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
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.
content idea: infinity scroll but not down, to top like whatsapp like slack, when we scroll top fetch the data and show
I'll have to check that out in Slack. Thanks for the request!
@@DaveGrayTeachesCode to view old messages
sir can I start WebDevelopment skill with MDN Documentation or any programming language Documentation.
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.
@@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".
@@DaveGrayTeachesCode sir how much time to learn javascript from MDN.
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.'
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: ua-cam.com/video/yBFHwJgqLD4/v-deo.html
You can apply this to fetch, axios, and anything else you use to send requests.
React Debounce Search Input with react query next? :D
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.
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
]
Sir, please recommend me MERN Stack master level course
I wanting to become a Mern stack
Have you completed my MERN course? ua-cam.com/video/CvCiNeLnZ00/v-deo.html