awesome-debounce-promise

Awesome Debounce Promise

Debounce your async calls with React in mind.

Forget about:

• concurrency issues when promise resolves in "unexpected" order
• leaving promise land for callback hell of Lodash / Underscore

From the author of this famous SO question about debouncing with React.

Install

yarn add awesome-debounce-promise

npm install awesome-debounce-promise --save

import AwesomeDebouncePromise from 'awesome-debounce-promise';

const asyncFunction = () => fetch("/api");

const asyncFunctionDebounced = AwesomeDebouncePromise(asyncFunction, 500, options)

Usecases

Debouncing a search input

const searchAPI = text => fetch('/search?text=' + encodeURIComponent(text));

const searchAPIDebounced = AwesomeDebouncePromise(searchAPI, 500);

class SearchInputAndResults extends React.Component {
  state = {
    text: '',
    results: null,
  };

  handleTextChange = async text => {
    this.setState({ text, results: null });
    const result = await searchAPIDebounced(text);
    this.setState({ result });
  };
  
  compponentWillUnmount() {
    this.setState = () => {};
  }
}

When calling debouncedSearchAPI:

• it will debounce the api calls. The API will only be called when user stops typing
• each call will return a promise
• only the promise returned by the last call will resolve, which will prevent the concurrency issues
• there will be at most a single this.setState({ result }); call per api call

Debouncing the background saving of some form items

const saveFieldValue = (fieldId, fieldValue) =>
  fetch('/saveField', {
    method: 'PUT',
    body: JSON.stringify({ fieldId, fieldValue }),
  });

const saveFieldValueDebounced = AwesomeDebouncePromise(
  saveFieldValue,
  500,
  // Use a key to create distinct debouncing functions per field
  { key: (fieldId, text) => fieldId },
);

class SearchInputAndResults extends React.Component {
  state = {
    value1: '',
    value2: '',
  };

  onFieldTextChange = async (fieldId, fieldValue) => {
    this.setState({ [fieldId]: fieldValue });
    await saveFieldValueDebounced(fieldId, fieldValue);
  };

  render() {
    const { value1, value2 } = this.state;
    return (
      <form>
        <input
          value={value1}
          onChange={e => onFieldTextChange(1, e.target.value)}
        />
        <input
          value={value2}
          onChange={e => onFieldTextChange(2, e.target.value)}
        />
      </form>
    );
  }
}

Options

const DefaultOptions = {
  // By default, the key is null, which means that all the function calls
  // will share the same debounced function
  // Providing a key function permit to use the call arguments
  // and route to a distinct debounced function
  key: () => null,

  // By default, a debounced function will only resolve
  // the last promise it returned
  // Former calls will stay unresolved, so that you don't have
  // to handle concurrency issues in your code
  onlyResolvesLast: true,
};

Other debouncing options are available and provided by an external low-level library: debounce-promise