🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details ➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder
I think you have given example of debouncing as window resizing is usecase of debouncing. -Regardless of resizing it will only show output at a certain time means we are delying the function call. -(showing output/exicuting function) only when event pause is usecase of debouncing.
This code is incorrect. Just add a console.log statement in the handler, and you will see. Not only is it executing the code at every interval even when the window size is not changing, but it also requires the handler to have a new reference to work properly. Please avoid adding misleading videos.
Dude 😐, just put a console.log("expensive api call") inside handleResize function, and look out the logs in console, you will get to know the problem with the code. Its an infinite expensive api calls irrespective of the resizing event. But yeah, great efforts, I think somehow we have to remove the use of useState from our custom hook to resolve the code here.
You really don’t need to throttle like that. You don’t need to compare and keep a track of the current time when it runs. It’s look buggy. How about this? const throttle = function(func, delay){ let isRunning = false; return function(…args){ if(!isRunning){ isRunning = true; func.apply(this, args); } setTimeout( ()=> isRunning = false, delay); } }
@@rakib_bhai74 with debounce understanding is that it will only execute the function once the activity is finished i.e. resize within the given delay time. So isn't debouncebetter here. Because with the throttle approach it will be called after time delay constantly right? Here, the reason to choose for debounce because the api call has fetching data and formatting data and then updating UI so due to complex operation i believe debounce would be better.
Can any one please explain the code at 15:45? I just passed simple delay as an args instead of delay - (Date.now() - lastExecuted.current). It works fine. Couldn't find any error. What's the point of writing that line? Many thanks in advance.
🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details
➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder
Why delay - (date now() - lastExecruted) as condition for setTimeout
I think you have given example of debouncing as window resizing is usecase of debouncing.
-Regardless of resizing it will only show output at a certain time means we are delying the function call.
-(showing output/exicuting function) only when event pause is usecase of debouncing.
why do you need to keep track of prev executed time, why not do something like this instead?
export const useThrottle = (inputVal, delay) => {
const [throttledVal, setThrottledVal] = useState(inputVal)
const timer = useRef(null)
useEffect(() => {
if(!timer.current) {
setThrottledVal(inputVal)
timer.current = setTimeout(() => {
timer.current = null
}, delay)
}
}, [inputVal, delay])
return throttledVal
}
This code is incorrect. Just add a console.log statement in the handler, and you will see. Not only is it executing the code at every interval even when the window size is not changing, but it also requires the handler to have a new reference to work properly. Please avoid adding misleading videos.
Dude 😐, just put a console.log("expensive api call") inside handleResize function, and look out the logs in console, you will get to know the problem with the code. Its an infinite expensive api calls irrespective of the resizing event.
But yeah, great efforts, I think somehow we have to remove the use of useState from our custom hook to resolve the code here.
But we can also use the intersection observer API to get this infinite scroll effect right?
BTW great video ❤
same feeling
You really don’t need to throttle like that. You don’t need to compare and keep a track of the current time when it runs. It’s look buggy. How about this?
const throttle = function(func, delay){
let isRunning = false;
return function(…args){
if(!isRunning){
isRunning = true;
func.apply(this, args);
}
setTimeout( ()=> isRunning = false, delay);
}
}
Bro, please explain as well...in the last you are directly writing the code ..for a new person it is difficult
Noted
thanks bhai, please do not take it in a negative way bhai. Bss mujhe lga.....@@RoadsideCoder
Sir pleasedo a todo app with CRUD operations machine coding question.
cool lesson! thank you
Great tutorial piyush 🙏
Can you also make one on how to build a voting poll in react js.
May be they were using intersection observer as i noticed that as soon as i see the load more button at the very bottom the next api is called!
❤
why not use Intersection Observer API ?
I will bring that too
What if we use debounce lodash func. For this purpose?
Will call the api for every event after first event out from call stack till last event
@@rakib_bhai74 with debounce understanding is that it will only execute the function once the activity is finished i.e. resize within the given delay time. So isn't debouncebetter here.
Because with the throttle approach it will be called after time delay constantly right?
Here, the reason to choose for debounce because the api call has fetching data and formatting data and then updating UI so due to complex operation i believe debounce would be better.
Superb
why not use debouncing instead ?
They are both separate techniques
Great
Denounced hook
👍👍
Can any one please explain the code at 15:45? I just passed simple delay as an args instead of delay - (Date.now() - lastExecuted.current).
It works fine. Couldn't find any error. What's the point of writing that line? Many thanks in advance.