@snappmarket/use-debounce v0.2.5

useDebounce

🔂 change rapidly, do once

get started

We provide two way of using this package single or multi :

npm i @snappmarket/use-debounce
OR
npm i @snappmarket/hooks

usage

import useDebounce from '@snappmarket/use-debounce';
// or 
// import { useDebounce } from '@snappmarket/hooks';


const MyComponenet = props => {
    const [value, setValue] = useState('');
    const [debouncedValue] = useDebounce(value, 200);


  /**
   * Call api based on debounced value
   */
  useEffect(() => {
    // do something with debounce
  }, [debouncedValue]);
};

source code

import { useState, useEffect } from 'react';

/**
 * Debounce setting a value
 * @param value
 * @param delay
 * @returns {[string, fn, fn]}
 */
export default function useDebounce(value, delay) {
  // State and setters for debounced value
  const [debouncedValue, setDebouncedValue] = useState(value);

  let handler;
  const canceller = () => {
    clearTimeout(handler);
  };

  useEffect(() => {
    handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    return canceller;
  }, [value]);

  return [debouncedValue, canceller, setDebouncedValue];
}