Debounce? Throttle requests?

[watadarkstar]

I'd like to debounce the request for the auto-suggestion example in this repository. So when a user types a search term, it waits 3000 ms before it fires a network request on the search term.

I'm not really sure how to do this with useSWR and I was wondering if there is a way to throttle / debounce the requests?

Example from repo:
https://github.com/zeit/swr/blob/master/examples/autocomplete-suggestions/pages/index.js

[sergiodxa]

What you could do is debounce updating searchTerm state in that example, this way it will delay the request too. Maybe something like this:

export default () => {
  const [searchTerm, setSearchTerm] = React.useState(null)
  const [realSearchTerm, setRealSearchTerm] = React.useState(null)
  const { data: countries = [], isValidating } = useSWR(
    () => (realSearchTerm ? `/api/suggestions?value=${realSearchTerm}` : null),
    fetcher
  )

  useTimeout(() => setRealSearchTerm(searchTerm), 3000);

  function handleSearchTermChange(event) {
    setSearchTerm(event.target.value)
  }

  return (
    <div style={{ textAlign: 'center' }}>
      <h1>Country Search</h1>
      <Combobox>
        <ComboboxInput
          className="country-search-input"
          onChange={handleSearchTermChange}
          aria-label="Countries"
        />
        {countries && countries.length > 0 && (
          <ComboboxPopover className="shadow-popup">
            <ComboboxList>
              {countries.map(country => (
                <ComboboxOption key={country} value={country} />
              ))}
            </ComboboxList>
          </ComboboxPopover>
        )}
      </Combobox>
    </div>
  )
}

The useTimeout hook comes from https://github.com/siddharthkp/use-timeout

[watadarkstar]

Thank you @sergiodxa that was exactly what I was looking for to spin a few ideas into my mind!

My implementation for others:

import useSWR from 'swr';

import { useDebounce } from '../../../utils/hooks';
...
// inside my component render method
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, 1000);
const { data: res, isValidating } = useSWR(
    () =>
      debouncedSearch ? `/api/suggestion?value=${debouncedSearch}` : null,
    Api.fetcher,
  );
...

// useDebounce.js
import { useState, useEffect } from 'react';

export default function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

[shuding]

Going to close this. Let us know if there's any other question and feel free to reopen it :)