useThrottle()

The useThrottle hook limits the rate at which a value updates, only applying changes after a specified delay since the last update. It’s ideal for optimizing performance in scenarios like search inputs, live filters, or scroll handlers, where rapid value changes could trigger expensive computations or API calls, reducing resource usage and improving responsiveness.

Import

import { useThrottle } from "reactuals";

Demo

Loading...

;

Usage

import React, { useState } from "react";
import { useThrottle } from "reactuals";

export const Component = () => {
  const [input, setInput] = useState("");
  const throttledInput = useThrottle(input, 500);

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Type something..."
      />
      <p>Throttled Value: {throttledInput}</p>
    </div>
  );
};