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

[luke-hanwook]

    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;
}

Originally posted by @watadarkstar in vercel/swr#110 (comment)