react-debounce-kit

A collection of advanced React hooks for debouncing state, effects, and callbacks. Perfect for optimizing performance and reducing unnecessary renders in your React applications.

Features

• useDebouncedCallback: Debounce any callback function.
• useDebouncedEffect: Debounce side effects in React components.
• useDebouncedState: Debounced state management for controlled inputs and more.

Installation

npm install react-debounce-kit

or

yarn add react-debounce-kit

Usage

useDebouncedCallback

import { useDebouncedCallback } from 'react-debounce-kit';

const MyComponent = () => {
  const debouncedLog = useDebouncedCallback((value) => {
    console.log(value);
  }, 500);

  return <input onChange={e => debouncedLog(e.target.value)} />;
};

useDebouncedEffect

import { useDebouncedEffect } from 'react-debounce-kit';

useDebouncedEffect(() => {
  // Effect logic here
}, [dependency], 300);

useDebouncedState

import { useDebouncedState } from 'react-debounce-kit';

const [value, setValue] = useDebouncedState('', 400);

API Reference

useDebouncedCallback(callback, delay)

• callback: Function to debounce
• delay: Debounce delay in milliseconds

useDebouncedEffect(effect, deps, delay)

• effect: Effect callback
• deps: Dependency array
• delay: Debounce delay in milliseconds

useDebouncedState(initialValue, delay)

• initialValue: Initial state value
• delay: Debounce delay in milliseconds