Package detail

debounce-for-react

dhaneshmane7MIT1.0.2

A simple and lightweight React hook for debouncing values. Ideal for optimizing performance in search fields, input handling, and other scenarios where you want to limit the rate of updates.

react, debounce, hook, hooks, react-hooks, react-hook, performance, utility, useDebounce, debounce-hook, react-utils, react-debounce, debounce-for-react, simple-debounce

readme

react-use-debounce

A simple react hook for debouncing an input with state variables in react.

Installation

npm i debounce-for-react

Usage

Live demo

import React, { useState } from "react";
import { useDebounce } from "debounce-for-react";

function ExampleComponent() {
  const [value, setValue] = useState("");
  const debouncedValue = useDebounce(value, 500);

  useEffect(() => {
    // Use debouncedValue for API calls or other effects
  }, [debouncedValue]);

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