https://github.com/susisu/use-debounced

React Hooks for debouncing state updates and function calls
https://github.com/susisu/use-debounced

Last synced: 3 months ago
JSON representation

React Hooks for debouncing state updates and function calls

• Host: GitHub
• URL: https://github.com/susisu/use-debounced
• Owner: susisu
• License: mit
• Created: 2020-04-07T13:13:19.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-03T17:30:41.000Z (9 months ago)
• Last Synced: 2024-04-29T16:21:13.682Z (8 months ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@susisu/catcher
• Size: 783 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @susisu/use-debounced

[![CI](https://github.com/susisu/use-debounced/workflows/CI/badge.svg)](https://github.com/susisu/use-debounced/actions?query=workflow%3ACI)

React Hooks for debouncing state updates and function calls

``` shell

# npm

npm i @susisu/use-debounced

# yarn

yarn add @susisu/use-debounced

# pnpm

pnpm add @susisu/use-debounced

```

## Usage

### `useDebouncedState`

`useDebouncedState` is like the standard `useState` hook, but state updates are debounced.

``` tsx

import React from "react";

import { useDebouncedState } from "@susisu/use-debounced";

const MyComponent: React.FC = () => {

  const [value, setValue, isWaiting] = useDebouncedState({

    init: "",

    wait: 1000,

  });

  return (

    


      


         {

            setValue(e.target.value);

          }}

        />

      

      
{isWaiting ? "..." : value}

    

  );

};

```


### `useDebouncedCall`

`useDebouncedCall` debounces synchronous function calls. When the given function is invoked after timeout, the result will be set to the state.

``` tsx

import React from "react";

import { useDebouncedCall } from "@susisu/use-debounced";

const MyComponent: React.FC = () => {

  const [user, call, isWaiting] = useDebouncedCall({

    func: ([name]) => findUser(name),

    init: undefined,

    wait: 1000,

  });

  return (

    


      


         {

            call(e.target.value);

          }}

        />

      

      
{isWaiting ? "..." : user?.email}

    

  );

};

```


### `useDebouncedAsyncCall`

`useDebouncedAsyncCall` debounces asynchronous function calls. When the given function is invoked after timeout and it is fulfilled, the result will be set to the state.

``` tsx

import React from "react";

import { useDebouncedAsyncCall } from "@susisu/use-debounced";

const MyComponent: React.FC = () => {

  const [user, call, isWaiting] = useDebouncedAsyncCall({

    func: ([name]) => fetchUser(name).catch(() => undefined),

    init: undefined,

    wait: 1000,

  });

  return (

    


      


         {

            call(e.target.value);

          }}

        />

      

      
{isWaiting ? "..." : user?.email}

    

  );

};

```


### `useDebouncedFunc`

`useDebouncedFunc` is a simple hook to create a debounced version of a function.

``` tsx

import React from "react";

import { useDebouncedFunc } from "@susisu/use-debounced";

const MyComponent: React.FC = () => {

  const [call] = useDebouncedFunc({

    func: ([value]) => setRemoteValue(value),

    wait: 1000,

  });

  return (

    


      


         {

            call(e.target.value);

          }}

        />

      

    

  );

};

```


## License

[MIT License](http://opensource.org/licenses/mit-license.php)

## Author

Susisu ([GitHub](https://github.com/susisu), [Twitter](https://twitter.com/susisu2413))