JAVASCRIPT
Throttling Function Calls with a useThrottle React Hook
Develop a `useThrottle` custom React hook to limit the rate at which a function can be called, optimizing performance for frequently triggered events like scrolling or window resizing.
import { useState, useEffect, useRef, useCallback } from 'react';
function useThrottle(value, interval = 500) {
const [throttledValue, setThrottledValue] = useState(value);
const lastRan = useRef(Date.now());
useEffect(() => {
const handler = setTimeout(() => {
if (Date.now() - lastRan.current >= interval) {
setThrottledValue(value);
lastRan.current = Date.now();
}
}, interval - (Date.now() - lastRan.current)); // Adjust timeout to hit interval more precisely
return () => {
clearTimeout(handler);
};
}, [value, interval]);
return throttledValue;
}
// How to use:
/*
import React, { useState, useEffect } from 'react';
import useThrottle from './useThrottle'; // Assuming useThrottle.js
function ScrollTracker() {
const [scrollPos, setScrollPos] = useState(0);
const throttledScrollPos = useThrottle(scrollPos, 200); // Update every 200ms
useEffect(() => {
const handleScroll = () => {
setScrollPos(window.scrollY);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
useEffect(() => {
console.log('Throttled Scroll Position:', throttledScrollPos);
// Perform expensive scroll-related operations here
}, [throttledScrollPos]);
return (
<div style={{ height: '2000px', padding: '20px' }}>
<h1>Scroll down to see throttling in action!</h1>
<p>Raw Scroll Y: {scrollPos}</p>
<p>Throttled Scroll Y: {throttledScrollPos}</p>
</div>
);
}
*/
How it works: The `useThrottle` hook limits how often a value can update. Unlike debouncing, which waits for a pause, throttling ensures the value updates at most once within a specified `interval`. This is highly effective for performance optimization in event handlers that fire rapidly, such as scroll events or window resizing, preventing excessive computations or re-renders.