React useState hook with debounce

README.md

React useDebouncedState hook

Why?

I was building a component that did address autocompletion against a GraphQL endpoint using react-apollo. The value of the input field was used to search for addresses, but I didn't want every single keystroke to result in a new GraphQL query. So, I needed some sort of debounce function (Apollo doesn't provide this natively).

While I could have used a class component for something like this, I wanted to see if it could be done more simply with Hooks. This is what I came up with.

use-debounced-state.js

import { useState, useEffect } from 'react';

/**
 * Custom Hook to create a "debounced" state.
 *
 * Example Usage:
 * ```js
 * function MyComponent() {
 *   const [rawValue, debouncedValue, setValue] = useDebouncedState('', 500);
 *
 *   <input value={rawValue} onChange={newVal => setValue(newVal)} />
 *   <MyChildComponent value={debouncedValue} />
 * }
 * ```
 * 
 * @param initialState {Any} Initial state
 * @param delay {Number} Delay for the debounce, in milliseconds
 * @return {Array} array containing the raw value, the debounced value, and the setState function.
 */
export default function useDebouncedState(initialState, delay) {
  const [state, setState] = useState(initialState);
  const [debouncedState, setDebouncedState] = useState(initialState);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedState(state), delay);
    return () => clearTimeout(timer);
  }, [state]);

  return [state, debouncedState, setState];
}