Throttle and Debounce


Updated May 26th, 2023

Use Throttle function to slow down scroll to save resources. Initially heard about this in Brad Schiff’s “Git a Web Dev job” when implementing a reveal on scroll feature. His implementation logic breaks when the browser window is resize so that’s why he reaches for debounce, which waits until the end of the resize drag before firing.

Good article here.

Video in RFTROU course as well, “Cleaning up after yourself?”

Lodash is a pretty large package so just pull out what you need.

useMemo instead of useCallback

When tearing down the listener you may need to teardown the throttle as well? For example the lodash.debounce library provides debouncedCallback.cancel() to cancel any scheduled calls.

I’m not sure if the above is needed if you are removing the event listener in the typical way with a return function.


Pluralsight article here on handling window resize.

Cleanup functions are needed when a long request is taking time and a user clicks away. When a component is unmounted we clean up. Besides async network requests you may have addes a keyboard listener to a model popup for when the escape key was hit.