Discussion on: A Custom React Hook that handles duplicate API call

[Alfredo Salzillo]

Maybe you wanted to implement an useDebounce

xnimorz / use-debounce

A debounce hook for react

Features

• classic debounced callback
• value debouncing
• cancel, maxWait and memoization

Install

yarn add use-debounce
# or
npm i use-debounce --save

Demos

The simplest way to start playing around with use-debounce is with this CodeSandbox snippet codesandbox.io/s/kx75xzyrq7

More complex example with searching for matching countries using debounced input: codesandbox.io/s/rr40wnropq (thanks to twitter.com/ZephDavies)

Changelog

github.com/xnimorz/use-debounce/bl...

Simple values debouncing

According to twitter.com/dan_abramov/status/106...

import React, { useState } from 'react';
import { useDebounce } from 'use-debounce';
export default function Input() {
  const [text, setText] = useState('Hello');
  const [value] = useDebounce(text, 1000);
  return (
    <div>
      <input
        defaultValue={'Hello'}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
      <p>Actual value: {text}</

…

View on GitHub

[Anxiny]

Thanks for replying.

But I feel like this is for the function that is repeatly called in one component.
Here is multiple components calling same api.