use-debounced-state-factory

use-debounced-state-factory returns a hook that provides a state and setter that throttle updates coming in rapid succession.

It is 131 bytes (128 gzipped).

Installation

npm install @jsxtools/use-debounced-state-factory

Usage

import { useState } from 'react';
import useDebouncedStateFactory from '@jsxtools/use-debounced-state-factory';

const useDebouncedState = useDebouncedStateFactory({ useState });

function Component() {
  // successive updates to `searchTerm` to will be deferred by 400 milliseconds
  const [searchTerm, setSearchTerm] = useDebouncedState(initialState, 400);
  const onSearchTermInput = event => setSearchTerm(event.target.value);

  return (
    <p>
      <label htmlFor="q">Search</label>
      <input id="q" name="q" defaultValue="" onInput={onSearchTermInput}>
    </p>
  )
}