Debounce useSwr

debounce-swr.js

// originally from: https://github.com/vercel/swr/issues/110#issuecomment-552637429
import useSWR from 'swr';
import useDebounce from 'hooks/use-debounce';

const App = () => {
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, 1000);
  const { data: res, isValidating } = useSWR(
    () => debouncedSearch ? `/api/suggestion?value=${debouncedSearch}` : null,
    Api.fetcher,
  );
  
  return null;
}

export default App;

use-debounce.js

import { useState, useEffect } from 'react';

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

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

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

  return debouncedValue;
}

export default useDebounce;