How to use the use-debounce/lib/useDebouncedCallback function in use-debounce

To help you get started, we’ve selected a few use-debounce examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github bestofjs / bestofjs-webui / src / components / search / SearchBox.js View on Github external
export const SearchBox = () => {
  const tags = useSelector(getAllTags)
  const { query, selectedTags, onChange } = useContext(SearchContext)
  const [inputValue, setInputValue] = useState(query)
  const [debouncedOnChange, cancel] = useDebouncedCallback(onChange, 300)

  const options = [{ id: '', counter: tags.length }, ...tags].map(item => ({
    ...item,
    value: item.id,
    label: item.name
  }))

  const selectedOptions = selectedTags.map(tagId =>
    options.find(({ id }) => id === tagId)
  )

  useEffect(
    () => {
      setInputValue(query)
    },
    [query]

use-debounce

Debounce hook for react

MIT
Latest version published 2 months ago

Package Health Score

85 / 100
Full package analysis