Use-debounced-effect-hook NPM

use-debounced-effect-hook

useEffect hook from ReactJS debounced!

This implements a debounce action to the useEffect hook we all know, making it possible to execute debounced effects!

If you want to run some code everytime one variable changes, but not repeatedly (e.g. wait for the user to finish typing), this is the package for you =).

Online Example

You can check this hook running in this page.

Install

You can use yarn or npm. Whatever floats your boat =).

Yarn

yarn add use-debounced-effect-hook

npm

npm install --save use-debounced-effect-hook

Usage

You can also check example in this repo for more code!

import React, { useState } from 'react'

import useDebouncedEffect from 'use-debounced-effect-hook'

const App = () => {
  const [search, setSearch] = useState("");

  const searchInApi = (searchValue) => {
    // Do your API request here.
  };

  // This will only fire useEffect once in 1s (1000ms) when search changes.
  // This is done to prevent unnecessary code execution repeatedly.
  useDebouncedEffect(
    () => searchInApi(search),
    [ search ],
    1000, // The debounce delay
  );

  return (
    <>
      <input
        onChange={({target: { value }}) => setSearch(value)}
        type="text"
      />
    </>
  )
}