useThrottle

Live Demo

Compare regular vs throttled event handlers. Scroll in the box and resize your window to see the difference.

Code Examples

Scroll Event Throttling

import { useThrottle, useEventListener } from "@uiblock/hooks";
import { useState } from "react";

export default function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0);

  const throttledScrollHandler = useThrottle(() => {
    setScrollY(window.scrollY);
  }, 100); // Limit to once per 100ms

  useEventListener('scroll', throttledScrollHandler);

  return <div>Scroll position: {scrollY}px</div>;
}

Resize Event Throttling

import { useThrottle, useEventListener } from "@uiblock/hooks";
import { useState } from "react";

export default function WindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  const throttledResizeHandler = useThrottle(() => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight
    });
  }, 200);

  useEventListener('resize', throttledResizeHandler);

  return (
    <div>
      Window: {windowSize.width} x {windowSize.height}
    </div>
  );
}

API Calls with Throttling

import { useThrottle } from "@uiblock/hooks";

export default function SearchWithThrottle() {
  const [results, setResults] = useState([]);

  const throttledSearch = useThrottle(async (query) => {
    if (!query) return;
    
    const response = await fetch(`/api/search?q=${query}`);
    const data = await response.json();
    setResults(data);
  }, 500);

  return (
    <input
      onChange={(e) => throttledSearch(e.target.value)}
      placeholder="Search..."
    />
  );
}

How It Works

Here's the implementation:

import { useCallback, useRef } from 'react'

export function useThrottle<T extends (...args: any[]) => any>(
  callback: T,
  delay: number
): T {
  const lastRan = useRef<number>(0)
  const timeoutRef = useRef<NodeJS.Timeout | null>(null)

  return useCallback(
    ((...args: Parameters<T>) => {
      const now = Date.now()
      
      if (now - lastRan.current >= delay) {
        // Execute immediately if enough time has passed
        callback(...args)
        lastRan.current = now
      } else {
        // Clear existing timeout and set a new one
        if (timeoutRef.current) {
          clearTimeout(timeoutRef.current)
        }
        
        timeoutRef.current = setTimeout(() => {
          callback(...args)
          lastRan.current = Date.now()
        }, delay - (now - lastRan.current))
      }
    }) as T,
    [callback, delay]
  )
}

Throttle vs Debounce

API Reference

💡 Use Cases

• Scroll event handlers for parallax effects
• Window resize handlers for responsive layouts
• Mouse move tracking for interactive elements
• API calls that shouldn't fire too frequently
• Button click protection against rapid clicking
• Real-time search with rate limiting
• Game loop optimizations
• Performance monitoring and analytics