react-input-debouncer

Why ?

Are you familiar with a problem of poor performance when filtering list of items by the input text?

A typical solution is to debounce an input change for some milliseconds. And many libraries exist to solve it, including famous lodash debounce.

Few issues with them:

lodash is massive and you need to do tiresome tricks to make it work with React.
Many of those libraries are wrappers around lodash.
The libraries provide wrapped input components (force me to use something like <DebouncedInput ... />), which is totally redundant.

This library simply provides react specific debounce function to use along with regular html input element.

This is fair for uncontrolled components, since controlled components require synchronous update.

Install

npm install --save @prawn-cake/react-input-debouncer

# OR
yarn add @prawn-cake/react-input-debouncer

Usage

Here I use useState hook, one of latest and greatest react hooks features.

import React from 'react';
import { useState } from 'react'
import debounce from '@prawn-cake/react-input-debouncer'

function MyComponent({ props }) {
    [value, setValue] = useState(''); 
    return (
        <React.Fragment>
            ...
            <label>{value}</label>
            <input 
                type="text"
                onChange={debounce(e => setValue(e.target.value), 100)}
            />
        </React.Fragment>
    )
}

MyComponent renders a fragment with a label and a text input elements. Text input is debounced for 100ms.