Implement useThrottle Hook in React

This challenge requires you to implement a custom React hook called useThrottle. Throttling is a technique used to limit the rate at which a function can be called. It ensures that a function is executed at most once within a specified time interval. This is particularly useful for performance optimization in scenarios like handling frequent user input (e.g., typing in a search bar, resizing a window) where you want to avoid excessive function calls.

Problem Description

You need to create a TypeScript React hook, useThrottle, that takes two arguments:

1. A function (callback) to be throttled.
2. A delay in milliseconds (delay).

The useThrottle hook should return a new function that, when called, will invoke the original callback function, but only after the specified delay has passed since the last time the throttled function was invoked. If the throttled function is called again before the delay has elapsed, the timer should reset, and the callback will be executed delay milliseconds after this new invocation.

Key Requirements:

• The hook must be implemented in TypeScript.
• It should accept a callback function and a delay.
• It should return a new function that wraps the original callback with throttling logic.
• The throttled function should pass any arguments it receives to the original callback.
• The throttled function should maintain the correct this context if it's used with class methods.

Expected Behavior:

When the returned throttled function is called:

• If delay milliseconds have passed since the last execution of callback, callback is executed immediately with the latest arguments.
• If delay milliseconds have not passed since the last execution of callback, a timer is set to execute callback after delay milliseconds. Crucially, if the throttled function is called again before this timer fires, the previous timer is cancelled, and a new timer is set. This ensures callback is executed delay milliseconds after the most recent call.

Edge Cases:

• Initial Call: The first call to the throttled function should execute the callback immediately (or after the delay, depending on the specific interpretation, though typically it executes immediately if there's no prior call). For this challenge, we'll define that the first call does trigger the callback after the delay.
• delay of 0: If delay is 0, the function should behave as if it's not throttled (i.e., execute on every call), though technically it will still wait for the current execution stack to clear if it's set to run asynchronously. For simplicity, we'll treat 0 as meaning execute as soon as possible after the current event loop tick.
• Multiple Calls within Delay: This is the core of throttling. The hook must correctly reset the timer on subsequent calls.
• Unmounting Component: Ensure no memory leaks occur if the component using the hook unmounts before any pending throttled calls are executed. The timers should be cleared.

Examples

Example 1: Basic Throttling

Imagine a search input where you only want to trigger an API call after the user has paused typing for 300ms.

import React, { useState, useEffect, useRef } from 'react';
import { useThrottle } from './useThrottle'; // Assuming useThrottle is in this file

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [apiResult, setApiResult] = useState('');

  // Function to simulate an API call
  const performSearch = (searchTerm: string) => {
    console.log(`Performing search for: ${searchTerm}`);
    // In a real app, this would be an API call
    setApiResult(`Results for "${searchTerm}"`);
  };

  // Throttle the performSearch function with a 300ms delay
  const throttledSearch = useThrottle(performSearch, 300);

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newQuery = event.target.value;
    setQuery(newQuery);
    throttledSearch(newQuery); // Call the throttled function
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleInputChange}
        placeholder="Search..."
      />
      <p>{apiResult}</p>
    </div>
  );
}

Input: User types "a", then "ap", then "app", then "appl", then "apple" into the input field rapidly.

Expected Behavior:

• The performSearch function will only be called once, approximately 300ms after the user stops typing the last character ("e").
• Console logs will show: Performing search for: apple (only once).
• apiResult will be updated to Results for "apple".

Example 2: Window Resize

Tracking window size changes to adjust UI elements. We don't need to update on every single pixel change.

import React, { useState, useEffect } from 'react';
import { useThrottle } from './useThrottle';

function ResizeTracker() {
  const [dimensions, setDimensions] = useState({ width: window.innerWidth, height: window.innerHeight });

  // Function to update dimensions, throttled
  const updateDimensions = () => {
    console.log('Updating dimensions...');
    setDimensions({ width: window.innerWidth, height: window.innerHeight });
  };

  // Throttle the updateDimensions function with a 200ms delay
  const throttledUpdateDimensions = useThrottle(updateDimensions, 200);

  useEffect(() => {
    window.addEventListener('resize', throttledUpdateDimensions);

    // Cleanup listener on unmount
    return () => {
      window.removeEventListener('resize', throttledUpdateDimensions);
    };
  }, [throttledUpdateDimensions]); // Depend on the throttled function

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

Input: User drags the browser window edge to resize it quickly for several seconds.

Expected Behavior:

• The updateDimensions function will be called at most once every 200ms.
• Console logs will show Updating dimensions... periodically, not continuously during rapid resizing.
• The displayed Window Dimensions will update accordingly.

Example 3: Edge Case - Rapid Calls with Arguments

Demonstrating argument passing and timer reset.

import React from 'react';
import { useThrottle } from './useThrottle';

function CallLogger() {
  const logCall = (message: string) => {
    console.log(`Logged: ${message} at ${Date.now()}`);
  };

  const throttledLogCall = useThrottle(logCall, 1000); // 1 second delay

  const handleClick = () => {
    throttledLogCall('Button Clicked 1');
    setTimeout(() => throttledLogCall('Button Clicked 2'), 200);
    setTimeout(() => throttledLogCall('Button Clicked 3'), 600);
    setTimeout(() => throttledLogCall('Button Clicked 4'), 1200); // This one should pass
  };

  return (
    <button onClick={handleClick}>Trigger Calls</button>
  );
}

Input: User clicks the "Trigger Calls" button.

Expected Behavior: Let's assume the handleClick is called at T=0.

• throttledLogCall('Button Clicked 1') is called at T=0. Timer set for T=1000.
• throttledLogCall('Button Clicked 2') is called at T=200. Previous timer cancelled. New timer set for T=1200 (200 + 1000).
• throttledLogCall('Button Clicked 3') is called at T=600. Previous timer cancelled. New timer set for T=1600 (600 + 1000).
• throttledLogCall('Button Clicked 4') is called at T=1200. Previous timer cancelled. New timer set for T=2200 (1200 + 1000).

Output (Console Logs): The logCall function will be executed only once, at approximately T=2200, with the argument 'Button Clicked 4'. The console output would look something like:

Logged: Button Clicked 4 at [timestamp around T=2200]

Constraints

• The useThrottle hook must be implemented using TypeScript.
• The delay argument will be a non-negative integer representing milliseconds.
• The callback function can accept any number of arguments of any type.
• The hook should not introduce significant performance overhead beyond the throttling mechanism itself.
• The hook must handle cleanup of timers when the component unmounts to prevent memory leaks.

Notes

• Consider using setTimeout and clearTimeout for managing the delay.
• useRef can be very helpful for storing mutable values like timer IDs across renders without causing re-renders.
• The callback needs to be invoked with the latest arguments provided to the throttled function.
• Ensure that the this context and arguments are correctly preserved when calling the original callback.
• The requirement is to throttle, not debounce. Throttling ensures a function runs at a maximum frequency, while debouncing ensures it runs only after a period of inactivity. In throttling, the function runs periodically, whereas in debouncing, it waits for a pause. For this specific implementation, we want the function to run delay ms after the last call, and reset the timer each time. This is a common interpretation of throttling for event handlers.