You made my day to easy understanding search with debounce in react. after searching lots of the video i got finally your video that me clear understanding..! Thanks for this video it really help me a lot..!
I do have a question though, I am having an issue regarding event pooling. Somehow the event is not passing through to the handleChange function. What do "...args" make reference to?
function debounce(func, timer) { clearTimeout(timer); timer = setTimeout(() => { func(); }, 4000); } onChange={(e) => { setInp(e.target.value); debounce(() => { console.log(e.target.value); }); }} can't we use this ? i dont understand why returning another function by debounce ?
Bro It's throttling effect. Very Nicely explained though, I tried using controlled components to achieve same but cud not. Using ref we can achieve this effect
@akashingole i hope this code will work fine if there is any issue with this debouncing implementation pls let me know export default function App() { const [inp, setInp] = useState(""); let timer; function debounce(func, timer) { clearTimeout(timer); timer = setTimeout(() => { func(); }, 4000); } return (
Thank you for watching.
-AI😊
You are the code GOD!
Finally found exactly what I was looking for :)
Glad I could help
You made my day to easy understanding search with debounce in react. after searching lots of the video i got finally your video that me clear understanding..!
Thanks for this video it really help me a lot..!
8:43 setTimeOut is not provided by javascript it is a browser api
This is Freaking Great!
I do have a question though, I am having an issue regarding event pooling. Somehow the event is not passing through to the handleChange function. What do "...args" make reference to?
Big Thanks to you BRO !!
It worked..
Big Thanks!
It worked..😊
good work dude!
when i try to run the code calling api from handleChange function i am getting CORS policy.
Why use useCallback() to memoise when the function is not being passed as props to any child component?
Yes no need of useCallback() function here, Code will work fine without useCallback() hook
Isn't this throttling cause you limit your function call to once in every 500ms. ?
Hello Akash , can you explain why we used apply () on fn ?
To borrow a function and invoked it directly.
How to make the api result as selectable options and get the value of the text?
Any idea? Looking for it still :((
function debounce(func, timer) {
clearTimeout(timer);
timer = setTimeout(() => {
func();
}, 4000);
}
onChange={(e) => {
setInp(e.target.value);
debounce(() => {
console.log(e.target.value);
});
}} can't we use this ? i dont understand why returning another function by debounce ?
what the difference between passing prop as type={'text'} or type='text'
thank you bro
How to add cache handler? ❣❣❣
Why can’t we call settimeout function and write handle change function in it ?
Bro It's throttling effect. Very Nicely explained though, I tried using controlled components to achieve same but cud not. Using ref we can achieve this effect
No buddy. This is trailing debouncing. There is also leading debouncing.
good. Can you provide the code please ? Thanks
Can i use this with redux action file?
Yes , you just need to dispatch your action where he calling api
useCallback hook is not required as it is not controlled input element
@akashingole i hope this code will work fine if there is any issue with this debouncing implementation pls let me know
export default function App() {
const [inp, setInp] = useState("");
let timer;
function debounce(func, timer) {
clearTimeout(timer);
timer = setTimeout(() => {
func();
}, 4000);
}
return (
{
setInp(e.target.value);
debounce(() => {
console.log(e.target.value);
});
}}
name="name"
value={inp}
placeholder="serach..."
/>
);
}
Very nicely explained 👍
Thank you 🙂