# @bytesoftio/use-debounced

> ## Installation

Latest version **1.0.0** (published 2020-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bytesoftio/use-debounced
pnpm add @bytesoftio/use-debounced
yarn add @bytesoftio/use-debounced
bun add @bytesoftio/use-debounced
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-09-09 |
| First published | 2020-07-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Maxim Kott |
| Maintainers | maximkott |

## Links

- npm: https://www.npmjs.com/package/@bytesoftio/use-debounced
- Repository: https://github.com/bytesoftio/use-debounced
- npm.io page: https://npm.io/package/@bytesoftio/use-debounced

## Recent versions

- 1.0.0 (latest) — 2020-09-09
- 0.0.2 — 2020-07-20
- 0.0.1 — 2020-07-20

## README

# @bytesoftio/use-debounced

## Installation

`yarn add @bytesoftio/use-debounced` or `npm install @bytesoftio/use-debounced`

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Description](#description)
- [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Description

Sometimes you might want to react to changes of a value, for example when building a live search. The user types into the search box, but you don't want to make an API call every 10 milliseconds, so you need to debounce that input somehow. This is where this package comes in handy, it allows you to create a debounced version of a certain value.

## Usage

A basic example of how this package might be used when building some sort of a live search functionality. 

```tsx
import React from "react"
import { useDebounced } from "@bytesoftio/use-debounced"
import { useAsync } from "@bytesoftio/use-async"

const findSomethingSomewhere = (query: string) => { /* some api call implementation */ }
  
const Example = () => {
  // "input" contains the latest value
  // "debouncedInput" contains a debounced version of "input", it will not change more than once every 300 milliseconds
  // "setInput" is used to update "input", the "debouncedValue" will not update immediately since it is debounced by 300 milliseconds
  // "setDebouncedInput" will update the "input" as well as its debounced version "debouncedInput" immediately
  const [input, debouncedInput, setInput, setDebouncedInput] = useDebounced("", 300)
  const [searchResult, loading, error] = useAsync(() => {
    if (debouncedInput.trim() === "") return undefined
    
		return findSomethingSomewhere(debouncedInput)
  }, [debouncedInput])
  
  return (
		<div>
      <input type="text" onChange={(e) => setInput(e.target.value)} value={input} />
      
      { ! searchResult && ! loading && <span>Type something into the search box</span>}
      { loading && <span>Loading...</span>}
      { error && <span>There was an error: { error.message }</span>}
      { searchResult && <pre>{ JSON.stringify(searchResult) }</pre>}
    </div>
  )
}
```

---
_Source: https://npm.io/package/@bytesoftio/use-debounced · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._