yarn use-debounce 1.1.1

latest releases: 10.0.0, 10.0.0-alpha, 9.0.4...
5 years ago
  • add callPending callback to useDebouncedCallback method. It allows to call the callback manually if it hasn't fired yet. This method is handy to use when the user takes an action that would cause the component to unmount, but you need to execute the callback.
import React, { useState, useCallback } from 'react';
import useDebouncedCallback from 'use-debounce/lib/callback';

function InputWhichFetchesSomeData({ defaultValue, asyncFetchData }) {
  const [debouncedFunction, cancel, callPending] = useDebouncedCallback(
    (value) => {
      asyncFetchData;
    },
    500,
    [],
    { maxWait: 2000 }
  );

  // When the component goes to be unmounted, we will fetch data if the input has changed.
  useEffect(
    () => () => {
      callPending();
    },
    []
  );

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

More examples are available here: 989d6c0#diff-c7e0cfdec8acc174d3301ff43b986264R196

Don't miss a new use-debounce release

NewReleases is sending notifications on new releases.