React Custom Hooks: useDebounce - Simply Explained! 

Hey everyone! I just launched 🚀 Project React, which is a course that teaches you React by building a real-world project. It goes way beyond what you see in these videos and walks you through step-by-step on how to build a big and complex application with React! You can check it out here: cosden.solutions/project-react

Dude, if you made a full react course with testing and all of the adv concepts, i'd pay for it. Your teaching styleis clear and concise and you don't gloss over the important parts AND you did it in TS? Sheesh. Legend.

Darius you lifesaver, I just knew when searching "react debounce" that you'd come up in the results, and that your solution would work! I wasn't approaching debouncing in the best way admittedly, and you've put me back on the straight and narrow, keep it up!

Seriously underrated channel, thank you so much for your continuous content!

You are one of the finest teacher I have found on yt the way you explain stuff amazing thanks sir Excited for upcoming stuff.

I see a lot of videos on RU-vid, but I can’t understand anything. But in this video, I understand everything about custom hooks. thanks sir

Good job, bro. Makes tons of sense

Nicely explained!

really nice, I've been learning a lot from your videos.

Thanks, you really hit the nail on the head

Perfect explanation!

Excellent and I loved ur videos and channel.

Thanks a lot. The debounce function was not working in React and now I know why and how to do it.

Thank you very much! Very useful and understandable

Eu amei o vídeo! ❤seu conteúdo é demais!

Exactly what I was looking for :D

This is awesome as your videos has helped me alot

Perfect tutorial! thanks

So helpful ❤

Nice Man great excellant

Many Thanks!

Thanks you so much bro ❤ nice explaination can you please do a detailed video on react virtualization

good explanation bro..

nice work

Thanks 👍

The is so much helpful, thanks so much.

thanks !

useful tips

cool thanks

hello good sir, may i just ask the difference of adding 'search' as value prop for your input as compared to not using the value prop but still using setSearch in the onChange? is it the same or which one is better? thank you

Can you do a video on Higher order components? You teach well.

Great video. Typically in react we load all the users when we load the page so when we are doing a search we are searching through the state on the fronted Nowadays, this type of issue, seems to be more realistic in an older styled app but if I am wrong, please correct me

Hey, your videos are so nicely explained, I just want to request you one thing, could you please make a explanation video about the MERN stack, and how much knowledge do we need to gain to land a job as the MERN stack developer? like in every field, react, express, mongodb, and node.

Thanks ! The explaination was clear and crisp . Can you make a video on how to organize /file sturucture your api calls using tanquery || custom hooks . Can we have like only 4 custom hooks for crud api calls ? i just want to learn prod level things from you . Thanks for the great vid

Easiest implementation of Debounce Search

❤❤❤

❤

❤❤

Great videos, but isn't your useDebounce hooks same as Reacts useDeferred hook with possibility to set up timeout?

what is the chat gpt add on being used?

Just a question. Isn't it better, to use import { debounce } from 'lodash'; ? it gave a lot of features. What is your opinion when looking at the documentation ? Thank !

Can we use useRef hook to do the same thing

Can you use useDebounce with formik ?Im currently having an issue where every keystroke in form field causes component to re-render like 2-3 times. Apparently it's a known issue with formik that is unresolved. Perhaps useDebounce can be used here.

I hope you make a seri to teach async JavaScript (promise, async await,...) I don't understand how it's works

Why doesn't it trigger on the first letter "render", maybe I don't correctly understand exactly.

LOL❤‍🔥

it says I cant accept the invite to discord(((

Hi, better use fetch abortion ?

I wanna know why you used hooks in useDebounce? It works without them like this..... ********************************** let timeId; function useDebounce(functionToDelay, delay == 1000) { clearTimeout(timeId) timeId = setTimeout(() => { functionToDelay() }, delay); } export default useDebounce // then import the useDebounce and put it inside of the useEffect **********************************

In my case, I've more than one input compnent. In one I type, let's say, the "Zip Code", In the one, I type in the "Street Address", With this I mean, that I need 2 inputs here, so my call to the API can take place.. However, when implementing this functionality, I get instead: *Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency arrar, or one of the depdendecies changes on every render* Has anyone experienced this scenario already? What solution did you apply?