React Custom Hooks: useDebounce - Simply Explained!
ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 2023
- Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
In this video we will learn about custom React hooks, starting with useDebounce. This is a powerful hook to use when you need to delay the updating of a value by a set amount of time. It's useful when you have a fetch being triggered by a input field and you don't want to fire a new request every time the input. We're going to see the problem, come up with a solution, and then use the custom useDebounce hook to fix it. Enjoy!
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
That is very nice and clean explanation every second was crucial, thanks for making the TH-cam community strong by putting exactly to-the-point videos
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.
Oh but I am making one :) stay tuned
I can't wait!@@cosdensolutions
@@cosdensolutions Hey bro make Next Js + Typescript course
I hope you won't forget your youtube tagline which says "best react content on youtube" apart from paid course.
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!
damn, thank you for the kind words! really glad you find the videos useful!
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.
Thanks for the comment!
I see a lot of videos on TH-cam, but I can’t understand anything. But in this video, I understand everything about custom hooks. thanks sir
really glad to hear it!
Good job, bro. Makes tons of sense
really nice, I've been learning a lot from your videos.
Thank you very much! Very useful and understandable
Nicely explained!
Excellent and I loved ur videos and channel.
Perfect explanation!
Eu amei o vídeo! ❤seu conteúdo é demais!
Exactly what I was looking for :D
what vscode theme are you using?
Thanks a lot. The debounce function was not working in React and now I know why and how to do it.
Perfect tutorial! thanks
yes you're totally correct!
This is awesome as your videos has helped me alot
Please could you also do an example using lodash
good explanation bro..
Thanks you so much bro ❤ nice explaination can you please do a detailed video on react virtualization
Beautiful ❤
So helpful ❤
Nice Man great excellant
Many Thanks!
The is so much helpful, thanks so much.
🤙
nice work
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
thanks !
useful tips
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.
the only thing is I'm more focused on React specifically for now, not dabbling too much into DB or backend stuff. Will do more of that once server components are more prominent in the industry 🤙
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
cool thanks
Thanks 👍
Can you do a video on Higher order components? You teach well.
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
will add it to the list! But also, I'm currently working on a course that will build a big project meant for production, so there will be tons to learn there too!
what is the chat gpt add on being used?
Could it be used the startTransition for this? I've been testing, and I don't think is pretty useful for this case.
Great videos, but isn't your useDebounce hooks same as Reacts useDeferred hook with possibility to set up timeout?
yes, useDebounce is the same thing but works through a delay. useDeferredValue is handled automatically through React without a fixed delay
Can we use useRef hook to do the same thing
Easiest implementation of Debounce Search
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 !
You can, but it is a big library and if you don't use a lot of its functions, sometimes its easier to just write it yourself
@@cosdensolutions Thank for your reply ! I finally ended up using this :
import { useDebounce, useDebouncedCallback, useThrottledCallback } from "use-debounce";
This is a light npm library in typescript.
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.
to do that, you would have to create your own input components that make use of useDebounce and manually update the state debounced! You could also try RHF as an alternative to Formik for better perf
❤❤❤
❤
❤❤
I hope you make a seri to teach async JavaScript (promise, async await,...) I don't understand how it's works
Will add it to the list!
Why doesn't it trigger on the first letter "render", maybe I don't correctly understand exactly.
Because it defers triggering until when the ms have elapsed!
it says I cant accept the invite to discord(((
it should work, maybe try a different browser?
LOL❤🔥
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
**********************************
well, based on "// then import the useDebounce and put it inside of the useEffect", you're also using hooks. You basically have to use hooks to implement this
@@cosdensolutions I mean there's no hooks inside the body of my example
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?