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!
That is very nice and clean explanation every second was crucial, thanks for making the RUclips community strong by putting exactly to-the-point videos
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
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 ! 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!
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 !
@@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.
useDeferredValue updates as soon as nothing else is blocking it. It's also dependent on how performant the user's device is. Faster device = faster updates. useDebounce is time based only regardless of anything else
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 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
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?
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.
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.
I see a lot of videos on RUclips, but I can’t understand anything. But in this video, I understand everything about custom hooks. thanks sir
really glad to hear it!
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!
That is very nice and clean explanation every second was crucial, thanks for making the RUclips community strong by putting exactly to-the-point videos
More examples of custom hooks please 🙌🙌
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
Perfect tutorial! thanks
yes you're totally correct!
Good job, bro. Makes tons of sense
Perfect explanation!
really nice, I've been learning a lot from your videos.
Nicely explained!
Exactly what I was looking for :D
what vscode theme are you using?
Excellent and I loved ur videos and channel.
This is awesome as your videos has helped me alot
Please could you also do an example using lodash
Eu amei o vídeo! ❤seu conteúdo é demais!
Thank you for the video. What is the extension that helps you complete code?
good explanation bro..
Easiest implementation of Debounce Search
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 🤙
thankyou very much!!
Beautiful ❤
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
So helpful ❤
The is so much helpful, thanks so much.
🤙
Many Thanks!
Thank You
Thanks you so much bro ❤ nice explaination can you please do a detailed video on react virtualization
Great dude 😮 thank yue
Can you do a video on Higher order components? You teach well.
nice work
Thanks 👍
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
thanks !
Could it be used the startTransition for this? I've been testing, and I don't think is pretty useful for this case.
Nice Man great excellant
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 ! 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!
useful tips
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.
cool thanks
what is the chat gpt add on being used?
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!
Can we use useRef hook to do the same thing
the functionality of useDebounce and useDeferredValue look very same, are they really same or is there any difference?
useDeferredValue updates as soon as nothing else is blocking it. It's also dependent on how performant the user's device is. Faster device = faster updates. useDebounce is time based only regardless of anything else
👍
❤
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
Why not usedefferedvalue ?
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
You're performing side effects here so you need to put this in useeffect and hence it becomes your custom hook
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?
❤❤
❤❤❤