use-debouncy

useDebouncy

🚦React effect hook for debounce.

Features

• 👌 No dependencies.
• 🏋️‍♀️ Small. <150 bytes. Size Limit controls the size.
• 📖 Types. Support typescript.
• 🎣 Easy. Like useEffect hook.

Installation

# NPM
npm install use-debouncy

# YARN
yarn add use-debouncy

Examples

Try in codesandbox

import React, { useState } from 'react';
import useDebouncy from 'use-debouncy';

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)} />
  );
};