use-debouncy

useDebouncy

🌀 Small (~0.2kb) debounce effect hook for React with TypeScript support

Features

• 👌 No dependencies.
• 🏋️‍ Tiny. ~0.2kb. Size Limit controls the size.
• 🦾 Performance. Used by requestAnimationFrame.
• 📖 Types. Support TypeScript.
• 🎣 Easy. Use like React effect or function.

Installation

# NPM
npm install use-debouncy

# YARN
yarn add use-debouncy

Check bit component here

# Import bit component
bit import eavam.use-debouncy/use-debounce

Usage

Demo codesandbox

Use as effect hook

import React, { useState } from 'react';
import useDebouncy from 'use-debouncy/effect'; // <== importing from effect

const App = () => {
  const [value, setValue] = useState('');

  useDebouncy(
    () => fetchData(value), // function debounce
    400, // number of milliseconds to delay
    [value], // array values that the debounce depends (like as useEffect)
  );

  return (
    <input value={value} onChange={(event) => setValue(event.target.value)} />
  );
};

Use as callback function

import React, { useState } from 'react';
import useDebouncy from 'use-debouncy/fn'; // <== importing from fn

const App = () => {
  const handleChange = useDebouncy(
    (event) => fetchData(event.target.value), // function debounce
    400, // number of milliseconds to delay
  );

  return <input value={value} onChange={handleChange} />;
};

API Reference

useDebouncy/effect

function useDebouncyEffect(fn: () => void, wait?: number, deps?: any[]): void;

Prop	Required	Default	Description
fn	✓		Debounce callback.
wait		0	Number of milliseconds to delay.
deps		[]	Array values that the debounce depends (like as useEffect).

useDebouncy/fn

function useDebouncyFn(
  fn: (...args: any[]) => void,
  wait?: number,
): (...args: any[]) => void;

Prop	Required	Default	Description
fn	✓		Debounce handler.
wait		0	Number of milliseconds to delay.

Changelog

4.1.1 (2021-04-19)

Reverts

• Revert "feat: removed fragile code related to fps timing" (1f5f684)
• Revert "feat: optimize size" (cf3aad7)
• this reverts commit 5952cffe6d1333c14836e2e033681af703bdfc86 (3f9f784)
• this reverts commit e2f60d284e534e53eb6082ff62a6096cc3462e01 (cf6b851)